ajax文件上傳進度
① ajax多文件上傳如何實現進度條
可以找一個上傳插件，如：webupload。
上傳插件可以配置顯示上傳進度，多文件上傳可以同時顯示多個文件的進度條。
如果自己寫的話，需要考慮瀏覽器兼容和文件上傳控制等。
② 哪個javascript框架支持ajax方式的文件上傳
7款基於JavaScript和AJAX的文件上傳插件，這些插件基本上都能實現以下功能：
多文件上傳，拖拽操作，實時上傳進度，自定義上傳限制
1. jQuery File Upload
具有多文件上傳、拖拽、進度條和圖像預覽功能的文件上傳插件，支持跨域、分塊、暫停恢復和客戶端圖像縮放。可與任何服務端平台（如PHP、Python、Ruby on Rails、Java、Node.js、Go等）一起使用，支持標準的HTML表單文件上傳。
2. Pixelcone Fileuploader
使用HTML5 API的jQuery文件上傳插件，支持AJAX上傳和拖拽操作，以及針對老版本瀏覽器的iframe上傳部件。有多種形式來實現多文件上傳，每種形式由單一的上傳腳本來控制。
3. Ajax Upload
該插件使用XHR來上傳多個文件，支持拖拽操作，可以在FF3.6+、Safari4+、Chrome等瀏覽器中完美運行。
4. Plupload
這是一個針對CMS或類似系統的、高度可用的上傳插件。支持分塊、拖拽、圖像縮放、限制文件大小、顯示上傳進度等。
5. Uploadify
Uploadify是一個jQuery插件，幫助你在網站中輕松添加多文件上傳功能，提供了兩個版本（HTML5、Flash）。支持多文件上傳、拖拽、實時進度顯示，提供了大量的定製功能。
6. Ajax File Upload
該插件是Ajaxupload插件的修改版本，不具備HTML5功能。
7. jQuery FileDrop
該插件使用HTML5 API，允許用戶從桌面拖動多個文件到瀏覽器中，並上傳每個文件到用戶指定的URL。該插件使用HTML5 FileReader()來讀取文件數據。
③ 前端上傳文件實時顯示進度條和上傳速度的工作原理是怎樣的
後端的責任。
④ Ajax文件上傳進度條如何實現（jquery版本
前端要做的就是設置一個定時器通過介面去後台獲取當前上傳進度是多少，然後渲染出進度條就行。當進度達到100%時清除定時器。
⑤ jquery ajax xhr監聽上傳進度顯示不準確，求解
如果你是用這種方式上傳的話，確實沒有好方法。
因為 XMLHttpRequest.onProgress 事件能拿到的是網路傳輸的位元組而已；你說的問題里，「上傳進度已完成」，實際是指瀏覽器已經把文件傳輸給了服務端；「很久才可以」，是你服務端額外處理的時間，這段時間對瀏覽器來說是不可感知的，它怎麼會知道你服務端處理需要多久呢？
一般處理思路有這么幾種：
1、上傳進度設置一個最大值，比如 99%，只有當服務端真正返回結果時才會變到 100%，這種方法最為簡單粗暴；
2、盡量減少服務端處理的時間，例如收到文件後交給非同步隊列去處理，立刻返回給客戶端響應，這種方法需要額外做的事件比較多，開發難度更高一些；
3、客戶端分片上傳，把大文件變成若干段小「文件」，缺點是瀏覽器只有支持 HTML5 才支持 FormData 分片。
⑥ 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.form.js實現文件上傳及進度條前端代碼
ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。
需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。
去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]
將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[圖片上傳失敗...(image-3d6ae0-1548557865446)]
[圖片上傳失敗...(image-9f0adf-1548557865446)]
更多用法可以 參考官網
⑧ ajax如何 實現 文件上傳
程序說明
使用說明
實例化時，第一個必要參數是file控制項對象：
newQuickUpload(file);
第二個可選參數用來設置系統的默認屬性，包括
屬性: 默認值//說明
parameter:{},//參數對象
action:"",//設置action
timeout:0,//設置超時(秒為單位)
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
還提供了以下方法：
upload：執行上傳操作；
stop：停止上傳操作；
dispose：銷毀程序。
varQuickUpload=function(file,options){
this.file=$$(file);
this._sending=false;//是否正在上傳
this._timer=null;//定時器
this._iframe=null;//iframe對象
this._form=null;//form對象
this._inputs={};//input對象
this._fFINISH=null;//完成執行函數
$$.extend(this,this._setOptions(options));
};
QuickUpload._counter=1;
QuickUpload.prototype={
//設置默認屬性
_setOptions:function(options){
this.options={//默認值
action:"",//設置action
timeout:0,//設置超時(秒為單位)
parameter:{},//參數對象
onReady:function(){},//上傳准備時執行
onFinish:function(){},//上傳完成時執行
onStop:function(){},//上傳停止時執行
onTimeout:function(){}//上傳超時時執行
};
return$$.extend(this.options,options||{});
},
//上傳文件
upload:function(){
//停止上一次上傳
this.stop();
//沒有文件返回
if(!this.file||!this.file.value)return;
//可能在onReady中修改相關屬性所以放前面
this.onReady();
//設置iframe,form和表單控制項
this._setIframe();
this._setForm();
this._setInput();
//設置超時
if(this.timeout>0){
this._timer=setTimeout($$F.bind(this._timeout,this),this.timeout*1000);
}
//開始上傳
this._form.submit();
this._sending=true;
},
//設置iframe
_setIframe:function(){
if(!this._iframe){
//創建iframe
variframename="QUICKUPLOAD_"+QuickUpload._counter++,
iframe=document.createElement($$B.ie?"<iframename=""+iframename+"">":"iframe");
iframe.name=iframename;
iframe.style.display="none";
//記錄完成程序方便移除
varfinish=this._fFINISH=$$F.bind(this._finish,this);
//iframe載入完後執行完成程序
if($$B.ie){
iframe.attachEvent("onload",finish);
}else{
iframe.onload=$$B.opera?function(){this.onload=finish;}:finish;
}
//插入body
varbody=document.body;body.insertBefore(iframe,body.childNodes[0]);
this._iframe=iframe;
}
},
//設置form
_setForm:function(){
if(!this._form){
varform=document.createElement('form'),file=this.file;
//設置屬性
$$.extend(form,{
target:this._iframe.name,method:"post",encoding:"multipart/form-data"
});
//設置樣式
$$D.setStyle(form,{
padding:0,margin:0,border:0,
backgroundColor:"transparent",display:"inline"
});
//提交前去掉form
file.form&&$$E.addEvent(file.form,"submit",$$F.bind(this.dispose,this));
//插入form
file.parentNode.insertBefore(form,file).appendChild(file);
this._form=form;
}
//action可能會修改
this._form.action=this.action;
},
//設置input
_setInput:function(){
varform=this._form,oldInputs=this._inputs,newInputs={},name;
//設置input
for(nameinthis.parameter){
varinput=form[name];
if(!input){
//如果沒有對應input新建一個
input=document.createElement("input");
input.name=name;input.type="hidden";
form.appendChild(input);
}
input.value=this.parameter[name];
//記錄當前input
newInputs[name]=input;
//刪除已有記錄
deleteoldInputs[name];
}
//移除無用input
for(nameinoldInputs){form.removeChild(oldInputs[name]);}
//保存當前input
this._inputs=newInputs;
},
//停止上傳
stop:function(){
if(this._sending){
this._sending=false;
clearTimeout(this._timer);
//重置iframe
if($$B.opera){//opera通過設置src會有問題
this._removeIframe();
}else{
this._iframe.src="";
}
this.onStop();
}
},
//銷毀程序
dispose:function(){
this._sending=false;
clearTimeout(this._timer);
//清除iframe
if($$B.firefox){
setTimeout($$F.bind(this._removeIframe,this),0);
}else{
this._removeIframe();
}
//清除form
this._removeForm();
//清除dom關聯
this._inputs=this._fFINISH=this.file=null;
},
//清除iframe
_removeIframe:function(){
if(this._iframe){
variframe=this._iframe;
$$B.ie?iframe.detachEvent("onload",this._fFINISH):(iframe.onload=null);
document.body.removeChild(iframe);this._iframe=null;
}
},
//清除form
_removeForm:function(){
if(this._form){
varform=this._form,parent=form.parentNode;
if(parent){
parent.insertBefore(this.file,form);parent.removeChild(form);
}
this._form=this._inputs=null;
}
},
//超時函數
_timeout:function(){
if(this._sending){this._sending=false;this.stop();this.onTimeout();}
},
//完成函數
_finish:function(){
if(this._sending){this._sending=false;this.onFinish(this._iframe);}
}
}