ajax上传进度
㈠ js ajax怎么获取上传的进度
ajax文件上传的进度条实现
<!DOCTYPE html>
<html>
<head>
<title>html5_2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#parent{width:550px; height:10px; border:2px solid #09F;}
#son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function showPic(){
var pic = $("#pic").get(0).files[0];
$("img").prop("src" , window.URL.createObjectURL(pic) );
uploadFile();
}
function uploadFile(){
var pic = $("#pic").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
$.ajax({
type: "POST",
url: "upload",
data: formData ,
processData : false,
//必须false才会自动加上正确的Content-Type
contentType : false ,
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});
}
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
</script>
</head>
<body>
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="showPic()"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
</body>
</html>
㈡ jquery ajax xhr监听上传进度显示不准确，求解
如果你是用这种方式上传的话，确实没有好方法。
因为 XMLHttpRequest.onProgress 事件能拿到的是网络传输的字节而已；你说的问题里，“上传进度已完成”，实际是指浏览器已经把文件传输给了服务端；“很久才可以”，是你服务端额外处理的时间，这段时间对浏览器来说是不可感知的，它怎么会知道你服务端处理需要多久呢？
一般处理思路有这么几种：
1、上传进度设置一个最大值，比如 99%，只有当服务端真正返回结果时才会变到 100%，这种方法最为简单粗暴；
2、尽量减少服务端处理的时间，例如收到文件后交给异步队列去处理，立刻返回给客户端响应，这种方法需要额外做的事件比较多，开发难度更高一些；
3、客户端分片上传，把大文件变成若干段小“文件”，缺点是浏览器只有支持 HTML5 才支持 FormData 分片。
㈢ ajax多文件上传如何实现进度条
可以找一个上传插件，如：webupload。
上传插件可以配置显示上传进度，多文件上传可以同时显示多个文件的进度条。
如果自己写的话，需要考虑浏览器兼容和文件上传控制等。