HTML:

     <form action="">

         <input type="file" id="file1" name="">

         <br>

         <input type="file" id="file2" name="">

         <br>

         <input type="button" value="保存">

     </form>

JS:

        $("input[type='button']").on('click', upfile);

        /**
* [upfile 文件上传]
* @return {[Object]} [成功回调]
*/
function upfile() { var formData = new FormData(); formData.append("接收字段1", document.getElementById('file1').files[0]);
// console.log(document.getElementById('file1').files[0]); formData.append("接收字段2", document.getElementById('file2').files[0]);
// console.log(document.getElementById('file2').files[0]); $.ajax({ url: '接口地址url', type: 'POST', data: formData, // 上传formdata封装的数据包 dataType: 'JSON', cache: false, // 不缓存 processData: false, // jQuery不要去处理发送的数据 contentType: false, // jQuery不要去设置Content-Type请求头 success: function(data) { // 成功回调 console.log(data); } }); }

成功后的效果:

ajax文件上传-FormData()的更多相关文章

  1. AJAX文件上传实践与分析,带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  2. 兼容ie的jquery ajax文件上传

    Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...

  3. ajax 文件上传,ajax

    ajax 文件上传,ajax 啥也不说了,直接上代码! <input type="file" id="file" name="myfile&qu ...

  4. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  5. php+ajax文件上传

    php+ajax文件上传 html: <input id="user_real_name" class="input_show" type="t ...

  6. springmvc+ajax文件上传

    环境:JDK6以上,这里我是用JDK8,mysql57,maven项目 框架环境:spring+springmvc+mybaits或spring+springmvc+mybatis plus 前端代码 ...

  7. iframe实现Ajax文件上传效果示例

    <!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...

  8. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  9. 表单文件上传,ajax文件上传

    原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码  index.jsp(表单文件上传) <form action="sh ...

随机推荐

  1. 美团2018年CodeM大赛-初赛B轮 C题低位值

    试题链接:https://www.nowcoder.com/acm/contest/151/C 定义lowbit(x) =x&(-x),即2^(p-1) (其中p为x的二进制表示中,从右向左数 ...

  2. Java面试集合(三)

    前言 大家好,给大家带来Java面试集合(三)的概述,希望你们喜欢 三 1.在Java中是否可以含有多个类? 答:可以含有多个类,但只有一个是public类,public类的类名与文件名必须一致. 2 ...

  3. webpack热加载:修改文件自动刷新浏览器并更新

    概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...

  4. 使用 maven-assembly-plugin 打包项目

    此种方式可避免resource节点对compile阶段的影响,compile阶段会读取resource节点的信息但是不会读取assembly的配置文件 1. pom文件 <?xml versio ...

  5. Linux - 查看进程状态

    ps命令 report a snapshot of the current processes. 能提供一份当前进程的快照,以列表的形式显示正在运行的进程. 列出进程的数量取决于命令所附加的参数,例如 ...

  6. iOS-常用的两个弹簧动画pop

    POPSpringAnimation *popAna = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition]; popA ...

  7. OSI七层模型和tcp/ip四层模型对比

    OSI 与TCP/IP 模型对比 OSI 协议层名称 TCP/IP 协议层名称 封装的单元 功能描述 TCP/IP协议 应用层(Application) 应用层(Application) 数据 应用程 ...

  8. conda环境里安装pydot

    一.conda环境里安装pydot, 输入以下命令即可: conda install -c anaconda pydot 二.如果运行tensorflow,提示缺什么包,都可以在这里下载. ----- ...

  9. hive中的子查询改join操作(转)

    这些子查询在oracle和mysql等数据库中都能执行,但是在hive中却不支持,但是我们可以把这些查询语句改为join操作: -- 1.子查询 select * from A a where a.u ...

  10. MySQL 一些内部原理

    1. MySQL 体系结构 如下图: Mysql是由SQL接口,解析器,优化器,缓存,存储引擎组成的(SQL Interface. Parser. Optimizer.Caches&Buffe ...