如何從js文件上傳問題（js讀取上傳的文件）

本文目錄一覽：

• 1、如何通過js完成多個文件的上傳
• 2、js 大文件分片上傳處理如何實現？
• 3、js文件上傳中遇到的知識點
• 4、js如何上傳文件
• 5、egg.js 文件上傳

如何通過js完成多個文件的上傳

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; ifiles.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);

}

js 大文件分片上傳處理如何實現？

推薦採用webuploader控件來解決。

關於WebUploader的功能說明：

大文件上傳續傳

支持超大文件上傳(100G+)和續傳，可以關閉瀏覽器，重啟系統後仍然繼續上傳。

開源

提供ASP.NET,JSP,PHP示例和源代碼，其中JSP提供MySQL,Oracle,SQL Server數據庫的配置和示例代碼。

分片、並發

分片與並髮結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。

當網絡問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。

預覽、壓縮

支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網絡數據傳輸。

解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。

多途徑添加文件

支持文件多選，類型過濾，拖拽(文件文件夾)，圖片粘貼功能。上傳本地指定路徑的文件，不需要通過點擊按鈕選擇文件。

粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊複製），Ctrl + V便可添加此圖片文件。

HTML5 FLASH

兼容主流瀏覽器和低版本瀏覽器，接口一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。而且支持IE6，IE8瀏覽器。

同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。

基於內存映射模式進行IO操作，充分發揮操作系統性能。

MD5秒傳

當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。

如果服務端與前端統一修改算法，取段md5，可大大提升驗證性能，耗時在20ms左右。

易擴展、可拆分

採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。

採用AMD規範組織代碼，清晰明了，方便高級玩家擴展。

js文件上傳中遇到的知識點

在前端開發中，我們經常遇到上傳文件的需求，以前都是用到時再找資料，但總是感覺對這塊不熟，最近翻資料學習了一下，記錄一下。

本文中涉及的知識點有：FileList對象，Blob對象，File對象，URL對象、FormData對象等。

本文參考 網道 ，總結而來。另外，強烈推薦網道，可以去 網道的官方 看看，是阮一峰大神發起的項目，提供互聯網開發文檔，文檔非常全面易懂。

FileList對象，是一個像數組的對象，擁有length屬性和item()方法，同時，它的每一項都是File對象。

input 標籤，將type設為file，之後得到的files屬性就是一個FileList對象。

blob 對象表示1個二進制文件的數據內容。blob對象和arraybuffer區別是，blob對象用於操作二進制文件，arraybuffer用於操作內存。

blob 對象擁有2個屬性和1個方法，分別是size(單位是位元組)、type屬性和slice()方法。

File 對象是一種特殊的Blob 對象。它在繼承了size、type屬性外，還同時有name、lastModified、lastModifiedDate等幾個屬性。

FileList 對象中的每一項都是File 對象。

拿到File 對象之後就要進行操作，下面是操作。

URL.createObjectURL(file) 允許為File 對象創建一個臨時鏈接，

FileReader 對象的屬性和方法比較多，屬性中比較重要的是result，方法中比較重要的是

FileReader 對象的所有屬性和方法可以參考 這裡 ,這裡就不再列出來了。

在早期的互聯網時候，提交數據都是用表單。表單提交數據有些缺陷，例如無法校驗表單數據，會刷新整個頁面等。隨着Ajax的興起，頁面表單提交數據慢慢退出歷史舞台，但有時上傳文件時我們偶爾會用到表單提交數據。

在調用構造函數new FormData(form)構造formdata對象時需要傳入form節點，如果不傳入，則默認構建空表單。如果傳入，則按照key=value的時候構建表單。

可以看看效果圖

FormData 對象主要的方法有：

cavas壓縮圖片其實很簡單，無非就是幾個步驟：

1、選擇圖片，判斷圖片是否大於2M（用File對象的size進行判斷，size的單位是位元組）；

2、用FileReader對象讀取文件成base64,

3、然後創建Image對象，賦值src屬性，在Image對象加載完成的回調里創建cavas並繪製圖片(根據圖片是否大於2M動態調整畫布大小)；

4、將cavas轉成blob，拼在formdata中用ajax上傳。

這篇文章到這裡也就結束了，這篇文章包含了一些瀏覽器中提供的對象，可以看到都是很簡單的內容。

js如何上傳文件

js採用File API 來上傳文件的。

File API 由一組 JavaScript 對象以及事件構成。賦予開發人員操作在 input type=」file」 … / 文件選擇控件中選定文件的能力。圖 1 展示了 File API 所有的 JavaScript 的組合關係。

File API 簡單示例

body

h1File API Demo/h1

p

!– 用於文件上傳的表單元素 —

form name=”demoForm” id=”demoForm” method=”post” enctype=”multipart/form-data”

action=”javascript: uploadAndSubmit();”

pUpload File: input type=”file” name=”file” //p

pinput type=”submit” value=”Submit” //p

/form

divProgessing (in Bytes): span id=”bytesRead”

/span / span id=”bytesTotal”/span

/div

/p

/body

運行效果：

egg.js 文件上傳

小文件的話就不需要使用文件流了

需要在config.default.ts(egg.js修改默認配置的文件)指定文件的限制

一般來說超過1mb的文件，在上傳的時候最好以流的形式去處理

egg.js中也提供的這類的插件

同樣的需要修config.default.ts文件，去限制文件的最大長度，如果不限制的話會默認是100kb的，這個要注意