首頁 > web前端 > js教程 > 原生JavaScript實作非同步多檔案上傳_javascript技巧

原生JavaScript實作非同步多檔案上傳_javascript技巧

WBOY
發布: 2016-05-16 15:28:16
原創
1547 人瀏覽過

這是在上篇的修改版本。後台程式碼不變就可以接著使用,但是腳本不再使用jQuery了,改為原生的JavaScript 程式碼,所以我們主要看JS程式碼。

先介紹一下技術參數:

頁面技術:HTML5

後台技術:Servlet 3.0

伺服器:Tomcat 7.0

腳本:JavaScript

HTML5 file元件的新屬性

accept : 如果在file元件中增加這個屬性就可以直接控制上傳的檔案類型了,實在是很方便。

multiple:是否允許選擇多個檔案
HTML5 頁面程式碼修改後

<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>
登入後複製

accept 的值可以參考:IANA MIME 類型(標準 MIME 類型的完整列表),如果使用的是DW開發的話,軟體本身就有提示。

如果選擇了多個文件,可以用JS做循環列印,看看文件的名稱,類型和大小,看示範程式碼

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)
 }
}
登入後複製

既然可以循環多檔案的話,就可以嘗試多檔案上傳了。

1、先建立 XMLHttpRequest 物件

//這是全域變數。因為是範例,所以就沒有判斷瀏覽器類型,低版本IE這麼寫的話會出問題的
var xhr = new XMLHttpRequest()
2.上篇介紹了進度事件(Progress) , 這次實作 progress 和 error 2個事件

error:在請求發生錯誤時觸發。

   對應上傳時發生錯誤所導致的上傳失敗:uploadFailed()

//上传失败
function uploadFailed(evt) {
 alert("上传失败");
}
  progress:在接收相应期间持续不断触发。

      对应上传进度方法:onprogress()
/**
 * 侦查附件上传情况 ,这个方法大概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 +"%");
}

登入後複製

最後就是上傳方法了,注意上面的html程式碼上傳用的方法也需要改成這個uploadFile()方法才能正常使用。

 //上传文件
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] );
 }

 //监听事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
 xhr.open("POST", "upload");
 //记得加入上传数据formData
   xhr.send(formData);
} 

登入後複製

PS: 這畢竟只是基本功能的演示範例,離公司使用的要求還相差十萬八千里,請謹慎在公司平台使用。

大家可以結合這篇文章學習:基於HTML5 Ajax檔案上傳進度條如何實現(jquery版本)

以上就是本文的全部內容,希望對大家的學習有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板