<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上傳圖片" onclick="uploadFile()" /><br />
<div id="parent">
　　<div id="son"></div>
</div>

function printFileInfo(){
 
 var picFile = document.getElementById("pic"); 
 var files = picFile.files;
 for(var i=0; i<files.length; i++){
  var file = files[i];
  var div = document.createElement("div")
  div.innerHTML = "第("+ (i+1) +") 個文件的名字："+ file.name +
  " , 文件類型："+ file.type +" , 文件大小:"+ file.size 
  document.body.appendChild( div)
 }
}

//上傳失敗
function uploadFailed(evt) {
 alert("上傳失敗");
}
　　progress：在接收相應(yīng)期間持續(xù)不斷觸發(fā)。

　　　　　　對應(yīng)上傳進(jìn)度方法：onprogress()
/**
 * 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執(zhí)行一次
 */
function onprogress(evt){
　var loaded = evt.loaded;       //已經(jīng)上傳大小情況 
 var tot = evt.total;       //附件總大小 
 var per = Math.floor(100*loaded/tot);   //已經(jīng)上傳的百分比 
　 $("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}

 //上傳文件
function uploadFile() {
　　//將上傳的多個文件放入formData中
 var picFileList = $("#pic").get(0).files;
 var formData = new FormData();
 for(var i=0; i< picFileList.length; i++){
  formData.append("file" , picFileList[i] );
 }

 //監(jiān)聽事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//發(fā)送文件和表單自定義參數(shù)
 xhr.open("POST", "upload");
 //記得加入上傳數(shù)據(jù)formData
　　 xhr.send(formData);
}