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>