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. 使用tmpfs的好处

    EBS上超高频率的IO写入 这几天注意到我的EC2机器上有非常大量的IO,导致AWS的总体开销增加了很多.比如9月份的帐单中: I/O requests     120,076,984 IOs     ...

  3. Python学习笔记（九）—— 函数

    一.函数调用: 1.python内部函数查询:http://docs.python.org/3/library/functions.html#abs 2.注意调用函数的参数个数和类型. 3.函数名其实 ...

  4. MySQL 插入emoji 表情

    create table doctorUserInfoMation ( id int not null auto_increment comment '系统ID', userId ) comment ...

  5. 把PHP的数组变成带单引号的字符串

    上次做项目的时候,遇到 查询结果为 数组.因为条件原因,需要用$where['_string'] 去组合查询.进而用到把数组变成单引号的字符串.举例:查询返回的数组为: $projectcode_ar ...

  6. 微信支付中的jsapi返回提示信息

    jsapi中跳转到微信支付中触发的方法是js中的getBrandWCPayRequest方法. 改方法中的返回结果msg提示信息如下: err_msg:get_brand_wcpay_request: ...

  7. ceph-mon 代码解读

    一.概述: ceph-mon代码必备知识:Paxos算法,参见此处 数据结构分析: monitor代码结构:    

  8. numpy中的np.random.mtrand.RandomState

    1 RandomState 的应用场景概述 在训练神经网络时,苦于没有数据,此时numpy为我们提供了 “生产” 数据集的一种方式. 例如在搭建神经网络(一)中的 4.3 准备数据集 章节中就是采用n ...

  9. http1.0 和 http1.1 主要区别

    1.背景   KeepAlive是就是通常所称的长连接.KeepAlive带来的好处是可以减少tcp连接的开销,这对于短response body的请求效果更加明显.同时,可以为采用HTTP协议的交互 ...

  10. win10 标注工具LabelImg 安装使用

    安装步骤(默认已经安装了Python3.X ): pip 安装PyQt5 进入cmd(Win键 + R键,输入cmd,enter键入),输入: >>pip install PyQt5 如果 ...