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. Eclipse导入项目时出错提示 project is missing required library

    Eclipse导入(import)项目时出错提示 project is missing required library... 以至于不能build... 然后项目会有红色感叹号: [解决办法] 右击 ...

  2. jenkins+maven+git+ 邮件自动转发 持续化集成 图文教程

    1.所需要的插件,安装plugin ,进入mangae Jenkins→ manage Plugins, 切换到Available tab, 选择如下plugin 安装 Gitplugin, GitH ...

  3. suricata 命令行解释【转】

    suricata命令行 转载地址:http://blog.sina.com.cn/s/blog_6f8edcde0101gcha.html suricata命令行选项说明 你能两种方式使用命令行选项, ...

  4. 深入解读键值产生原理,linux中的软链接和硬链接(转)

    键值 = 文件标示符 + 项目ID 当用到进程间的通信时, 必须要注意到的是键值是怎么产生的,我们知道任何一个文件时通过文件名来访问的, 而内核在对应的给其一个值,也就是文件标示符. 系统建立IPC通 ...

  5. magento 为用户注册增加一个字段(转)

    步骤 I. 加一个occupation/title字段到用户注册页,差不多在register.html的54行,在email下方加一个Occupation显示代码 代码: <li>< ...

  6. 【Struts2】自定义拦截器interceptors

    下面给一张图片表示Struts2拦截器的处理流程. 通过这个流程图,我们可以看出一个完整的请求大概的过程为: 请求 -->filter 控制器 --> 拦截器 1/ 拦截器 2--> ...

  7. “C++的数组不支持多态”?

    先是在微博上看到了个微博和云风的评论,然后我回了“楼主对C的内存管理不了解”. 后来引发了很多人的讨论,大量的人又借机来黑C++,比如: //@Baidu-ThursdayWang:这不就c++弱爆了 ...

  8. 构建基于阿里云OSS文件上传服务

    转载请注明来源:http://blog.csdn.net/loongshawn/article/details/50710132 <构建基于阿里云OSS文件上传服务> <构建基于OS ...

  9. android安卓系统上运行jar文件

    原文链接: http://blog.sina.com.cn/s/blog_658c8cea0101mdhp.html 步骤如下: 1. 将文件打包成可执行jar文件(可在eclipse里export) ...

  10. Python之杨辉三角算法实现

    学习了廖雪峰的官方网站的python一些基础,里面有个题目,就是让写出杨辉三角的实现,然后我就花了时间实现了一把.思路也很简单,就是收尾插入0,然后逐层按照杨辉三角的算法去求和实现杨辉三角. 附属代码 ...