[JavaScript] 使用 HTML5 API 判斷上傳欄位資料的型態與大小

本篇文章更新時間：2020/01/29
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。

前端能處理的，後端就有機會節省資源，所以前端表單輸入的資料能夠先行驗證也比什麼都不檢查直接丟給後端來得好！

但後端撰寫的精神永遠是保持懷疑，多做檢查

這筆記是剛好要處理一個上傳檔案的表單。如果前端能先判斷好上傳檔案型態與大小，就能避免等後端接收後才判斷，如果有問題可以當前頁面就處理好。

程式碼片段如下：

function ValidateFileSize() {
    if (window.FileReader && window.Blob) {
        var FileSize = this.files[0].size / 1024 / 1024; // in MB
        if (FileSize > 5) {
           alert('上傳檔案大小不得超過 5 MB！');
           this.value = "";
        } else {

        }
        var type = this.files[0].type.split('/');
        if (type[1]=='png'||type[1]=='pdf'||type[1]=='jpeg'||type[1]=='jpg'){
            //pass
        } else {
            alert('不支援的檔案格式！僅支援上傳 JPG, PNG, PDF 檔案，且檔案大小不得超過 5 MB。');
            this.value = "";
        }
    } else {
        // File and Blob are not supported
    }
}
$('input[type="file"]').change(ValidateFileSize);

判斷式中 window.FileReader && window.Blob 是用來偵測瀏覽器是否支援 HTML5 File API

參考：

1. MDN 在網頁應用程式中使用本地檔案
2. How to check file MIME type with javascript before upload?）

如果判斷上傳欄位的檔案不符合需求，需要重置該欄位的作法為：

$('input[type="file"]').val('');

這樣就能洗掉原本選取的檔案了。