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语言学习笔记 (010) - 编写strcpy函数

    很多公司的面试官在面试程序员的时候,要求应聘者写出库函数strcpy()的工作方式或者叫实现,很多人以为这个题目很简单,实则不然,别看这么一个小小的函数,它可以从三个方面来考查: (1)编程风格 (2 ...

  2. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  3. 【代码导读】Github 开源项目——wysihtml5 富编辑器（Bootstrap 风格）【一】

    如果你经常留迹于各大论坛.博客,肯定对它们的富编辑器稍有印象.纯 Javascript 富编辑器可以说是前台 JS 脚本的巅峰作品.一款完整的编辑器,其复杂的功能,会让你遇到各种头痛的浏览器兼容问题, ...

  4. Linux CentOS 7.x/6.x/5.x 导入epel源

    How to Enable EPEL Repository for RHEL/CentOS 7.x/6.x/5.x vim /etc/yum.repos.d/CentOS-Base.repo 取消注释 ...

  5. 【struts2】action中使用通配符

    在以前的学习中,<action>元素的配置,都是用明确的配置,其name.class等属性都是一个明确的值.其实Struts2还支持class属性和method属性使用来自name属性的通 ...

  6. 那些令人喷饭的代码注释：仅以此代码献给...it's realy ?

    程序源代码中的注释经常是一个卧虎藏龙的地方,有人就很喜欢写幽默搞笑的注释内容.解释代码含义的同时,也带给人轻松神经的机会,确实是很有意思的风格,来看看这一辑国外某公司产品中的注释. 注意:看的时候严禁 ...

  7. 《JAVA与模式》之备忘录模式

    一.备忘录(Memento)模式结构 备忘录对象是一个用来存储另外一个对象内部状态的快照(snapshot)的对象.备忘录模式的用意是在不破坏封装的条件下,将一个对象的状态捕捉住,并外部化,存储起来, ...

  8. 跟我学SharePoint2013视频培训课程——设置列表名称、描述、导航等基本信息(12)

    课程简介 第12天,怎样在SharePoint 2013设置列表名称.描述.导航等基本信息. 视频 SharePoint 2013 交流群 41032413

  9. 第2章 Python基础-字符编码&数据类型 购物车&多级菜单 作业

    作业 一.三级菜单 数据结构: menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, ...

  10. FreeSWITCH增加iLBC编码

    1. 安装ilbc库从第三方库里下载指定版本 git clone https://freeswitch.org/stash/scm/sd/libilbc.git ./bootstrap.sh ./co ...