https://blog.csdn.net/u011500781/article/details/54931716

http://yunzhu.iteye.com/blog/2177923

***********************************************

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>测试</title>
  5.     <meta charset="utf8">
  6.     <script src="../js/jquery-1.11.3.min.js"></script>
  7. </head>
  8. <body>
  9.     <form id="form">
  10.         <input name="file" type="file" />
  11.         <input name="a" value="1" />
  12.         <input value="2" />
  13.     </form>
  14.     <button>提交</button>
  15. </body>
  16. </html>
  17. <script>
  18.     $(function() {
  19.         // 监听上传进度
  20.         var xhrOnProgress = function(fun) {
  21.             xhrOnProgress.onprogress = fun; //绑定监听
  22.             return function() {
  23.                 //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
  24.                 var xhr = $.ajaxSettings.xhr();
  25.                 //判断监听函数是否为函数
  26.                 if (typeof xhrOnProgress.onprogress !== 'function')
  27.                     return xhr;
  28.                 //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
  29.                 if (xhrOnProgress.onprogress && xhr.upload) {
  30.                     xhr.upload.onprogress = xhrOnProgress.onprogress;
  31.                 }
  32.                 return xhr;
  33.             }
  34.         }
  35.  
  36.         $('button').on('click', function() {
  37.             var formData = new FormData($('#form')[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData
  38.             formData.append('b', 3);// 还可以添加额外的表单数据
  39.  
  40.             $.ajax({
  41.                 type: 'post',
  42.                 url: '../../../material/jQueryFileUpload?type=1',
  43.                 data: formData,
  44.                 contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：#1)
  45.                 processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：#2)
  46.                 xhr: xhrOnProgress(function(e){// (详见：#3)
  47.                     var percent=e.loaded / e.total;//计算百分比
  48.                     $('body').append('->'+ percent);
  49.                 }),
  50.                 success: function(data) {
  51.                     $('body').append('完成');
  52.                 }
  53.             })
  54.         })
  55.     })
  56. </script>

使用jquery提交FormData数据的更多相关文章

  1. jQuery提交Json数据到Webservice，并接收返回的Json数据

    jQuery ajax webservice:get 和 post 一.GET 方式 客户端 复制代码 代码如下: var data = { classCode: "0001"}; ...

  2. 基于Ajax提交formdata数据、错误信息展示和局部钩子、全局钩子的校验。

    formdata重点: 实例化FormData这个类 循环serializeArray可以节省代码量 图片要用$('#id')[0].files[0]来获得 加上contentType:false和p ...

  3. angularjs和jquery前端发送以http请求formdata数据

    formdata是比较常见的前端发送给后端的请求,不仅可以上传数据,而且同时可以上传文件. jquery使用http请求上传formdata数据的方法: var formdata = new Form ...

  4. Jquery Ajax 提交json数据

    在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...

  5. 从零开始实现multipart/form-data数据提交

    在HTTP服务应用中进行数据提交一般都使用application/json,application/x-www-form-urlencoded和multipart/form-data这几种内容格式.这 ...

  6. jquery ajax 提交 FormData

    $('form').submit(function(){ var formdata=new FormData(this); $.ajax({ type:'POST', url:'/url/path', ...

  7. jquery提交form表单插件jquery.form.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 跨域WebApi的Jquery EasyUI的数据交互

    目录 1       大概思路... 1 2       创建WebAPI 1 3       创建CrossMainController并编写... 1 4       Nuget安装microso ...

  9. post提交的数据几种编码格式

    1.背景介绍 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端 ...

随机推荐

  1. HttpClient库设置超时

    HttpClient库API跟Lucene一样,每个版本的API都变化很大,这有点让人头疼.就好比创建一个HttpClient对象吧,每一个版本的都不一样. 3.X是正常的Java语法 HttpCli ...

  2. linux shell 脚本攻略学习9--rename命令详解

    rename命令详解: 对文件重命名是常用的操作之一,一般对单个文件的重命名用mv命令,如: amosli@amosli-pc:~/learn/example$ ls abc.txt amosli@a ...

  3. Linux中tomcat启动很慢，SessionIdGeneratorBase.createSecureRandom耗时5分钟

    通常情况下,tomcat启动只要2~3秒钟,突然有一天,tomcat启动非常慢,要花5~6分钟,查了很久,终于在这篇文章找到了解决方案,博主牛人啊. 原文参见:http://blog.csdn.NET ...

  4. openstack neutron 深入

    一.概述 环境说明:

  5. 使用Delphi实现票据精确打印

    一.概述在银行,税务,邮政等行业的实际工作中,经常涉及到在印刷好具有固定格式的汇款单,储蓄凭证,税票等单据上的确定位置打印输出相关的信息.在此类需求中,精确地定位单据并打印相关信息,是解决问题的关键. ...

  6. 会动的Tabbar

    项目搭建 一.设计模式首先呢,小Q采用传统的MVC的设计模式,优点我们再来啰嗦一下啊:1.多个视图可以对应一个模型.按MVC设计模式,一个模型对应多个视图,可以减少代码的复制及代码的维护量,一旦模型发 ...

  7. mysql单机多实例

    在数据库服务器上,可以架构多个Mysql服务器,进行单机多实例的读写分离: 可以通过mysqld_multi来进行多实例的管理,mysqld_multi是用perl写的脚本,原理是通过mysql_ad ...

  8. Android插件化与热修复(六)-微信Tinker原理分析

    Tinker热修复原理分析 热补丁技术是在用户不需要重新安装应用的情况下实现应用更新,可快速解决一些线上问题.热补丁省去了Android应用发布版本的成本,而且用户端的更新也是无感知的. Tinker ...

  9. 【转】编辑器与IDE

    编辑器与IDE 无谓的编辑器战争 很多人都喜欢争论哪个编辑器是最好的.其中最大的争论莫过于 Emacs 与 vi 之争.vi 的支持者喜欢说:“看 vi 打起字来多快,手指完全不离键盘,连方向键都可以 ...

  10. tensorflow中使用Batch Normalization

    在深度学习中为了提高训练速度,经常会使用一些正正则化方法,如L2.dropout,后来Sergey Ioffe 等人提出Batch Normalization方法,可以防止数据分布的变化,影响神经网络 ...