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. 了解Java基本数据类型的取值范围

    拿byte类型做栗子 一个字节是8位二进制数,然后最高位会用来作为符号位.正数计算机是存的原码,负数是存的补码. 也就说byte正数最大是0111 1111,转化为十进制是:127(这就是byte的上 ...

  2. 12:集合map、工具类

    一.map集合 Map:一次添加一对元素.Collection 一次添加一个元素. Map也称为双列集合,Collection集合称为单列集合. 其实map集合中存储的就是键值对(结婚证书), map ...

  3. Tomcat 在 Linux 上的安装和配置

    一.文件上传 先上传tomcat安装文件到Linux服务器 二.解压安装 使用以下命令解压安装包 .tar.gz 解压成功会生成一个文件夹 tomcat服务器运行时是需要JDK支持的,所以必须先安装好 ...

  4. HTML中META标签的使用

    一.META标签简介 <meta> 元素可提供有关页面的元信息,元数据总是以名称/值的形式被成对传递的. <meta> 标签位于文档的头部,不包含任何内容. <meta& ...

  5. Android精通:View与ViewGroup,LinearLayout线性布局,RelativeLayout相对布局,ListView列表组件

    UI的描述 对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...

  6. WIN10下Prolific USB-to-Serial Comm Port驱动

    最近在安装Prlific的时候,通过电脑自动安装启动后,发现系统无法识别,如下图所示: 还以为是驱动比较老,没有及时更新导致的,去官网下载最新的驱动,发现了这个列表: 这个驱动不支持win10. 后来 ...

  7. MySql安装与使用(linux)

    安装 MySQL 注意:此处安装是yum安装为例: MySQL安装 #yum install mysql-server 完后显示如下: MySQL初始化 #service mysqld start 查 ...

  8. Linux编程 4 (创建文件touch,复制文件cp,tab补全,链接文件ln)

    一.创建文件 使用touch 可以创建空文件,例如opt目录下创建test2.txt文件.这种一般是有些程序必须要先创建文件,才能使用. 二. 复制文件 2.1 使用cp命令来复制文件,需要两个参数- ...

  9. Spring Boot + Spring Cloud 构建微服务系统(二):服务消费和负载(Ribbon)

    使用RestTemplate调用服务 在上一篇教程中,我们是这样调用服务的,先通过 LoadBalancerClient 选取出对应的服务,然后使用 RestTemplate 进行远程调用. Load ...

  10. redis.properties

    #### env:${env} redis.maxIdle= ##最小空闲数 redis.minIdle= ##最大连接数:能够同时建立的“最大链接个数” redis.maxTotal= #每次最大连 ...