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. MySQL长度、大小写验证问题[开发篇]

    实际情况是这样的,从外部读取数据,然后存入数据库,要求不能重复存入数据. 由于以前的系统里没有加唯一键,所以,就只有手动判断相同记录是否存在了. case1.由于其中某个值存在为空情况,而存入时该值变 ...

  2. ubuntu 16.04 安装chrome的方法

    默认chrome在ubuntu上是没默认安装,安装也不能使用apt-get 来安装,一般会遇到名字无法找到的问题. 摸索了一下,才找到一个比较好的安装方式: 1 从网站: https://www.ch ...

  3. python实现桶排序算法

    桶排序算法也是一种可以以线性期望时间运行的算法,该算法的原理是将数组分到有限数量的桶里,每个桶再分别排序. 它的算法流程如下所示: 设置一个定量的数组当作空桶子. 寻访序列,并且把项目一个一个放到对应 ...

  4. python 开发环境配置

    上篇文章配置了虚机基础环境,本篇文章介绍配置python开发环境 配置YUM源 使用国内yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos ...

  5. Python基础教程(第3版) 笔记(三)

    1.9.1让脚本像普通程序一样在UNIX中运行脚本,只需将下面的代码作为脚本的第一行, 就可在UNIX中轻松运行脚本: #!/usr/bin/env python 要像普通程序一样运行脚本,还必须将其 ...

  6. Linux学习笔记之三————Linux命令概述

    一.引言 很多人可能在电视或电影中看到过类似的场景,黑客面对一个黑色的屏幕,上面飘着密密麻麻的字符,梆梆一顿敲,就完成了窃取资料的任务. Linux 刚出世时没有什么图形界面,所有的操作全靠命令完成, ...

  7. 各种height 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度docu ...

  8. UNPIVOT

      UNPIVOT UNPIVOT则相反,把数据从列旋转到行 SELECT  * INTO    product_vlues FROM    ( SELECT    NAME ,            ...

  9. window7环境下ZooKeeper的安装运行及监控查看

    原文:http://www.cnblogs.com/RainAndWind/p/4668427.html ZooKeeper是一个分布式开源框架,供了协调分布式应用的基本服务.这些天在使用DUBBO, ...

  10. JS 从斐波那契数列浅谈递归

    一.前言 昨晚下班后,经理出于兴趣给我们技术组讲了讲算法相关的东西,全程一脸懵逼的听,中途还给我们出了一道比较有趣的爬楼问题,问题如下: 假设一个人从地面开始爬楼梯,规定一步只能爬一坎或者两坎,人只能 ...