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

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

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

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

程式碼片段如下:

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('');

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

Facebook 外掛功能


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[//////////____30%_________]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *