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. 基于 CoreText 实现高性能 UITableView

    引起UITableView卡顿比较常见的原因有cell的层级过多.cell中有触发离屏渲染的代码(譬如:cornerRadius.maskToBounds 同时使用).像素是否对齐.是否使用UITab ...

  2. Linux 日志切割工具cronolog详解

    一.前言 二.cronolog 简介 三.cronolog 特点 四.cronolog 安装 五.cronolog 使用 六.cronolog 总结 注,操作系统 CentOS 6.4 x86_64, ...

  3. Nginx防爬虫或限制浏览器访问

    假定一个场景:某个网站它可能不希望被网络爬虫抓取,例如测试环境不希望被抓取,以免对用户造成误导,那么需要在该网站中申明,本站不希望被抓取.有如下方法: 方法一:修改nginx.conf,禁止网络爬虫的 ...

  4. 【javascript】javascript常用函数大全

    javascript函数一共可分为五类:   •常规函数   •数组函数   •日期函数   •数学函数   •字符串函数   1.常规函数   javascript常规函数包括以下9个函数:   ( ...

  5. Android App卡顿慢优化之解决内存抖动及内存泄漏

    前面一篇博客说到了,内存抖动的第二种情况,就是必须在短时间内创建对象,但是要控制数量:这个问题目前可以使用对象池的方法解决. 3)Object Pools 在程序里面经常会遇到的一个问题是短时间内创建 ...

  6. 实现超级简单的bug管理系统

    大家可以试着去实现一个超级简单的bug管理系统 不需要鉴权,也就是不需要登陆 有tag管理功能,缺陷上可以加tag,通过tag区分bug的状态和类型 bug的增删改查功能 bug描述支持markdow ...

  7. CTreeCtrl获得鼠标点击时的节点

    原文链接: http://blog.csdn.net/lcalqf/article/details/21321923 1.添加图标 HICON icon[10]; icon[0]=AfxGetApp( ...

  8. YMP运行初始化步骤

    , Version.VersionType.Release); private static final Log _LOG = LogFactory.getLog(YMP.class); privat ...

  9. java appium客户端 6.1.0android长按及滑动变更

    今天使用appium 6.1.0 java客户端,发现长按longpress(element),无法使用.如下代码在5.0.4 版本是可以正常运行的, WebElement noteDelete = ...

  10. 解决NavicatPremium导入CSV文件中文乱码的问题

    在做数据对接导入的时候对方提供的数据是CSV格式的文件 一开始用Excel打开时发现格式就不对,后来发现只要用Excel打开,就会破坏里面的格式 然后想先用NaviCat导入CSV再转成Excel格式 ...