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. Python的多线程技巧

    使用多线程可以加快程序运行速度. 遍历占用cpu不高,单线程跑程序占用的CPU很少. 多线程则是CPU占用多,内存占用少了. [一个实例]:multi_process.py ### multi_pro ...

  2. 神文章2：文本矩阵简述 V1.0 -vivo神人

    评论: 牛逼的业余书籍爱好者读书思路,指导思想. 2013/9/22         文本矩阵简述 V1.0http://www.douban.com/note/170688812/ 文/vivo   ...

  3. 【ASP.NET】@Model类型的使用详解

    有时需要在ASP.NET MVC4的视图的@model中使用多个类型的实例,.NET Framework 4.0版本引入的System.Tuple类可以轻松满足这个需求. 假设Person和Produ ...

  4. 【Servlet】Java Serlvet Filter 过滤器

    Filter的设计思想Filter是一种AOP(aspect-oriented programming)的设计思想 : 面向切面编程.用于的请求和响应都会走 使用filter的登录案例我们通过一张图片 ...

  5. Linux安装ElasticSearch-2.2.0-分词器插件（IK）

    1.在gitpub上搜索elasticsearch-analysis,能够看到所有elasticsearch的分词器: 2.安装IK分词器:https://github.com/medcl/elast ...

  6. 技术的正宗与野路子 c#, AOP动态代理实现动态权限控制（一） 探索基于.NET下实现一句话木马之asmx篇 asp.net core 系列 9 环境(Development、Staging 、Production)

    黄衫女子的武功似乎与周芷若乃是一路,飘忽灵动,变幻无方,但举手抬足之间却是正而不邪,如说周芷若形似鬼魅,那黄衫女子便是态拟神仙. 这段描写出自<倚天屠龙记>第三十八回. “九阴神抓”本是& ...

  7. 为什么 c = tf.matmul(a, b) 不立即执行矩阵乘法？

    在 TensorFlow Python API 中,a.b 和 c 是  tf.Tensor  对象.Tensor 对象是指令结果的符号句柄,但它实际上并不存放指令的输出值.相反,TensorFlow ...

  8. 子类化GetOpenFileName/GetSaveFileName, 以及钩子函数OFNHookProc的使用的简要说明

    昨天, 群里面有一个人问起: 要怎么让"文件打开对话框"居中显示, 有人说子类. 而我告诉他的方法是用钩子函数OFNHookProc, 不知道这是不是所谓的子类?相信看了我今天这篇 ...

  9. golang ---image

    package main import ( "image" "image/color" "image/gif" "os" ...

  10. Js实现动态添加删除Table行示例

    <table cellpadding="0" cellspacing="0" border="1" style="margi ...