input标签type=file的文件上传

news/2024/7/11 1:15:22 标签: jquery, js, javascript

一,通过表单提交的方式

该提交方式只是提交普通表单;对于file组所选中的文件内容是不上传的,因此需要设置:enctype属性

enctype="multipart/form-data"

如果想上传多文件,可添加multiple

<input type="file" name="img" multiple="multiple" />

二,通过Ajax异步提交的方式

获取文件内容:

javascript">//javascript
var file = document.getElementById('fileToUpload').files[0];

//jQuery:
var file = $("#img_input").prop("files")[0];

上传:
XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件。比起普通的Ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

javascript">// 创建
var form_data = new FormData();
// 获取文件
var file_data = $("#img_input").prop("files")[0];
// 把所以表单信息
form_data.append("id", "001");
form_data.append("name", "test");
form_data.append("img", file_data);
$.ajax({
    type: "POST",
    url: "....",
    dataType : "json",
    processData: false,  // 注意:让jQuery不要处理数据
    contentType: false,  // 注意:让jQuery不要设置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});

http://www.niftyadmin.cn/n/1665378.html

相关文章

Python Web开发:从 wsgi 开始

本文参考了&#xff1a; Wikipedia : Web Server Gateway InterfaceWSGI: The Server-Application Interface for Pythonwsgi.tutorial.codepoint.net/introflask 源码解析&#xff1a;应用启动流程想要理解wsgi&#xff0c;首先得区分一个概念&#xff1a;server 和 app。 此图…

Ajax嵌套Ajax的使用

需要post,get设置为同步,全局设置&#xff1a; $.ajaxSetup({async:false });或 $.ajax({url:URL,type:post,async:false,//同步请求data:"param12233",dataType:text,success:function(data){},error:function(data){} })

SpringBoot全局日期格式化(基于注解)

/*** 全局日期格式化*/ JsonComponent public class DateFormatConfig {private static SimpleDateFormat dateFormat new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");/*** 日期格式化*/public static class DateJsonSerializer extends JsonSerializer<Date> …

简要说明S3C2410X的Nandflash启动模式

由于Norflash相对较高的价格&#xff0c;一般MCU厂商都会通过其他方法在硬件上实现支持Nandflash启动模式。 S3C2410X就是在MCU内部集成4KB被叫作Steppingstone的SRAM&#xff0c;当系统启动时Nandflash前4KB数据就被自动地拷贝到Steppingstone中&#xff0c;然后从Steppingsto…

JS获取每项中调用函数的当前元素DOM

jquery用$(this)的方式即可&#xff1a; for (var i in list) { ..... <button type"button" class"btn " onclick"like(${p.id},this)"><img src"/fonts/hand-thumbs-up.svg" alt"hand" width"18" heig…

[TJOI2019]唱、跳、rap和篮球——NTT+生成函数+容斥

题目链接&#xff1a; [TJOI2019]唱、跳、rap和篮球 直接求不好求&#xff0c;我们考虑容斥&#xff0c;求出至少有$i$个聚集区间的方案数$ans_{i}$&#xff0c;那么最终答案就是$\sum\limits_{i0}^{n}(-1)^i\ ans_{i}$ 那么现在只需要考虑至少有$i$个聚集区间的方案数&#xf…

内核移植之编译初体验

开发平台&#xff1a;Ubuntu11.04 目 标板&#xff1a;优龙FS2410 编 译器&#xff1a;arm-gcc-4.1.1.tar.bz2 (可从http://download.csdn.net/detail/npy_lp/3821111 上下载) 内核源码&#xff1a;linux-2.6.38.8.tar.bz2 交叉编译Linux内核大概会经历如下几步&#xff1a; 第…

java B2B2C源码电子商城系统-Spring Cloud常见问题与总结(二)

在使用Spring Cloud的过程中&#xff0c;难免会遇到一些问题。所以对Spring Cloud的常用问题做一些总结。需要JAVA Spring Cloud大型企业分布式微服务云构建的B2B2C电子商务平台源码 一零三八七七四六二六 一、整合Hystrix后首次请求失败 1.1 原因分析 Hystrix 默认的超时时间是…