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. 【BZOJ3676】 [Apio2014]回文串(SAM,manacher)

    传送门 BZOJ 洛谷 Solution 考虑我们每找到一个回文串就更新一次答案,跑个SAM,这样子复杂度是爆炸的. 接下来的就是优化: 我们可以倍增跳直到跳不了,最后的siz就是出现次数. 没了?没 ...

  2. 583. Delete Operation for Two Strings

    Given two words word1 and word2, find the minimum number of steps required to make word1 and word2 t ...

  3. 第二十二节:Java语言基础-详细讲解位运算符与流程控制语句

    位运算符(二进制位运算) 运算符 运算 例子 << 左移 3 << 2 = 12 --> 3 * 2 * 2 =12 >> 右移 3 >> 1 = ...

  4. LeetCode--No.001 Two Sum

    Two Sum Total Accepted: 262258 Total Submissions: 1048169 Difficulty: Easy Given an array of integer ...

  5. centos7 安装oracle11g

    创建数据库的系统用户和用户组 $ su root #切换到root # groupadd oinstall #创建用户组oinstall # groupadd dba #创建用户组dba # user ...

  6. JavaScript中继承的那些事

    引言 JS是一门面向对象的语言,但是在JS中没有引入类的概念,之前特别疑惑在JS中继承的机制到底是怎样的,一直学了JS的继承这块后才恍然大悟,遂记之. 假如现在有一个“人类”的构造函数: functi ...

  7. SQL分别求行、列的平均值

    日常工作中,会需要用SQL求平均值,分别是求某一项的平均值或求某一个对象的平均值,放到表格就是求一行中的几个字段的平均值和求一列的平均值. 第一种:[列的平均值]AVG:这个函数相信大家都不陌生的,求 ...

  8. 死磕 java集合之ArrayDeque源码分析

    问题 (1)什么是双端队列? (2)ArrayDeque是怎么实现双端队列的? (3)ArrayDeque是线程安全的吗? (4)ArrayDeque是有界的吗? 简介 双端队列是一种特殊的队列,它的 ...

  9. Asp.net core 跨域设置

    验证环境: dotnet core 2.1/Asp.net core2.1 一.作用域在中间件层  配置的方式是在startup.cs文件Configure(IApplicationBuilder a ...

  10. EL表达式报错:  According to TLD or attribute directive in tag file, attribute value does not accept any expressions

    EL表达式报错: According to TLD or attribute directive in tag file, attribute value does not accept any ex ...