10個對web開發人員有用的HTML檔案上傳技巧

我們可以將input型別指定為file，以在web應用程式中使用檔案上傳功能。

input filte提供按鈕上傳乙個或多個檔案。預設情況下，它使用作業系統的本機檔案瀏覽器上傳單個檔案。成功上傳後，file api使得可以使用簡單的 js **讀取file物件。要讀取file物件，我們需要監聽change事件。

首先，通過id獲取檔案上傳的例項:

const fileuploader = document.getelementbyid('file-uploader');

然後新增乙個change事件偵聽器，以在上傳完成後讀取檔案物件，我們從event.target.files屬性獲取上傳的檔案資訊：

fileuploader.addeventlistener('change', (event) => );

在控制台中觀察輸出結果，這裡關注一下filelist陣列和file物件，該物件具有有關上傳檔案的所有元資料資訊。

如果我們想上傳多個檔案，需要在標籤上新增multiple屬性：

現在，我們可以上傳多個檔案了，以前面事例為基礎，選擇多個檔案上傳後，觀察一下控制台的變化：

每當我們上傳檔案時，file物件都有元資料資訊，例如file name，size，last update time，type 等等。這些資訊對於進一步的驗證和特殊處理很有用。

const fileuploader = document.getelementbyid('file-uploader');
// 聽更 change 件並讀取元資料
fileuploader.addeventlistener('change', (event) => );
}});

下面是單個檔案上傳的輸出結果：

我們可以使用accept屬性來限制要上載的檔案的型別，如果只想上傳的檔案格式是.jpg，.png時，可以這麼做：

在上面的**中，只能選擇字尾是.jpg和.png的檔案。

成功上傳檔案後顯示檔案內容，站在使用者的角度上，如果上傳之後，沒有乙個預覽的，就很奇怪也不體貼。

我們可以使用filereader物件將檔案轉換為二進位制字串。然後新增load事件偵聽器，以在成功上傳檔案時獲取二進位制字串。

// filereader 例項
const reader = new filereader();
fileuploader.addeventlistener('change', (event) => );
});

如果使用者上傳過大，為了不讓伺服器有壓力，我們需要限制的大小，下面是允許使用者上傳小於1m的，如果大於1m將上傳失敗。

fileuploader.addeventlistener('change', (event) => `;
} else  file has been uploaded successfully. `;
}  feedback.innerhtml = msg;
});

更好的使用者體驗是讓使用者知道檔案上傳進度，前面我們用過了filereader以及讀取和載入檔案的事件。

const reader = new filereader();

filereader還有乙個progress事件，表示當前上傳進度，配合html5的progress標籤，我們來模擬一下檔案的上傳進度。

我們可以上傳整個目錄嗎?嗯，這是可能的，但有一些限制。有乙個叫做webkitdirectory的非標準屬性(目前只有谷歌瀏覽器還有microsoft edge支援按照資料夾進行上傳)，它允許我們上傳整個目錄。

使用者必須需要確認才能上傳目錄

使用者單擊「上傳」按鈕後，就會進行上傳。這裡要注意的重要一點。filelist陣列將以平面結構的形式包含有關上載目錄中所有檔案的資訊。對於每個file物件，webkitrelativepath屬性表示目錄路徑。

例如，上傳乙個主目錄及其下的其他資料夾和檔案：

現在，file 物件將將webkitrelativepath填充為：

不支援檔案上傳的拖拽就有點 low 了，不是嗎?我們來看看如何通過幾個簡單的步驟實現這一點。

首先，建立乙個拖放區域和乙個可選的區域來顯示上傳的檔案內容。

drop here

通過它們各自的id獲取dropzone和content區域。

const dropzone = document.getelementbyid('drop-zone');
const content = document.getelementbyid('content');

新增乙個dragover事件處理程式，以顯示將要複製的內容的效果:

接下來，我們需要乙個drop事件***來處理。

dropzone.addeventlistener('drop', event => );

有乙個特殊的方法叫做url.createobjecturl()，用於從檔案中建立唯一的url。還可以使用url.revokeobjecturl()方法來釋放它。

url.revokeobjecturl()靜態方法用來釋放乙個之前已經存在的、通過呼叫url.createobjecturl()建立的 url 物件。當你結束使用某個 url 物件之後，應該通過呼叫這個方法來讓瀏覽器知道不用在記憶體中繼續保留對這個檔案的引用了。

fileuploader.addeventlistener('change', (event) => );