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。
上傳插件可以配置顯示上傳進度，多文件上傳可以同時顯示多個文件的進度條。
如果自己寫的話，需要考慮瀏覽器兼容和文件上傳控制等。