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

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

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

<!doctype html>

<html>

<head>

    <title>测试</title>

    <meta charset="utf8">

    <script src="../js/jquery-1.11.3.min.js"></script>

</head>

<body>

    <form id="form">

        <input name="file" type="file" />

        <input name="a" value="1" />

        <input value="2" />

    </form>

    <button>提交</button>

</body>

</html>

<script>

    $(function() {

        // 监听上传进度

        var xhrOnProgress = function(fun) {

            xhrOnProgress.onprogress = fun; //绑定监听

            return function() {

                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象

                var xhr = $.ajaxSettings.xhr();

                //判断监听函数是否为函数

                if (typeof xhrOnProgress.onprogress !== 'function')

                    return xhr;

                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去

                if (xhrOnProgress.onprogress && xhr.upload) {

                    xhr.upload.onprogress = xhrOnProgress.onprogress;

                }

                return xhr;

            }

        }

        $('button').on('click', function() {

            var formData = new FormData($('#form')[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData

            formData.append('b', 3);// 还可以添加额外的表单数据

            $.ajax({

                type: 'post',

                url: '../../../material/jQueryFileUpload?type=1',

                data: formData,

                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：#1)

                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：#2)

                xhr: xhrOnProgress(function(e){// (详见：#3)

                    var percent=e.loaded / e.total;//计算百分比

                    $('body').append('->'+ percent);

                }),

                success: function(data) {

                    $('body').append('完成');

                }

            })

        })

    })

</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. c++ 静态类成员函数(static member function) vs 名字空间 (namespace)

    好多人喜欢把工具函数做成static member function.这样以增加隐蔽性和封装性,由其是从C#,java转而使用c++的开发人员. 例如: class my_math { public: ...

  2. k8s实战读书笔记

    一.概述 kubernetes中Service是真实应用的抽象,将用来代理Pod,对外提供固定IP作为访问入口,这样通过访问Service便能访问到相应的Pod,而对访问者来说只需知道Service的 ...

  3. TripleDES之C#和PHP之间加密解密

    在C#常用加密解密一文中,介绍了几个加密解密方法,其中有个如何使用对称加密算法DES,此次说下DES的升级版,TripleDES. DES和TripleDES之间的关系可以参考下面的博文. 对称加密D ...

  4. iOS 11和xcode9

    最近发现了比较奇怪的问题,就是 ios10.几以前的版本,用xcode9 编写的程序   如果程序写的table是  plain的  ,那么  在  ios10.几及以下版本都会显示成group样式, ...

  5. 【struts2】自定义更强大的logger拦截器

    Struts2自带的logger拦截器只是打印出了Action所对应的URL以及执行的方法名称,这对实际开发来说是肯定不够的.实际开发中为了调试方便,要记录的信息比较多,通常需要把这次请求相关的几乎所 ...

  6. android开发资源

    android仿微信 http://www.oschina.net/code/snippet_253900_33261

  7. PreparedStatement的用法及优点

    jdbc(java database connectivity,java数据库连接)的api中的主要的四个类之一的java.sql.statement要求开发者付出大量的时间和精力.在使用statem ...

  8. ajaxupload.js调用始终进入error回调

    现象:脚本调用成功,文件上传也成功,但是始终进入error的回调函数. 1. ajaxfileupload.js jQuery.extend({ handleError: function( s, x ...

  9. 如何在ppt或word中添加高亮代码？

    如何在ppt或word中添加高亮代码? 问题: 如何ppt中添加带有语法高亮的程序代码,就如同下面的形式(在ppt嵌入高亮代码,且可以编辑,带有行号) 详细的要求如下: 1.代码带有语法高亮. 2.结 ...

  10. unity, 2d rope

    https://www.youtube.com/watch?v=l6awvCT29yU