input type file 限制上傳檔案型別

2022-07-30 13:54:11 字數 737 閱讀 4101

前端與後台資料進行對接時,就避免不了要使用ajax進行http請求,常用的請求就兩個post與get;然而常見的post請求的需求是檔案上傳,可能我一說到檔案上傳大家都覺得so  easy啊,沒什麼嘛,就是幾行 js **就能搞定的事。是的,簡單的檔案上傳是可以直接使用formdata()物件將檔案上傳;如果問題只是這麼簡單就好了,可能大家也都遇到過上傳檔案型別的限制,不知道大家有沒有注意到這麼簡單的方法將檔案型別過濾,下面直接貼**:

alert(『不支援這種型別的檔案』)

關於陣列的indexof()方法怎麼用,可以看我的這篇博文:

2、 css實現:不知道大家有沒有注意到乙個細節,那就是我選擇了檔案之後,如果不是我規定的型別頁面就會彈框告訴我不支援這個格式的檔案,那麼問題就來了,既然不支援這種格式的檔案,那我可不可以在點開檔案進行選擇的時候,不是我要的格式的檔案就不顯示,那我就不能選擇,同時頁面也不會這麼討厭的讓我去重新選擇它要的格式,能做到嗎?答案是能,而且不需要任何**,簡簡單單的在html頁面就能實現:**如下:

在input檔案框中,新增accept特性,特性中限制檔案型別,那麼在點開輸入框進入本地磁碟選擇檔案時,不是accept特性指定的檔案型別那麼你在開啟的本地磁碟檔案中就看不到這些檔案。

input type file 限制上傳檔案的格式

最近乙個專案,要求使用者上傳檔案時必須為docx 檔案,不支援txt 及上傳,下面貼出 希望大家需要時直接拿去取用,寫的不好或者不對的地方希望大家指出來 html 部分 此處的 nchange document.getelementbyid textfield value this.value 是為...

定義input type file 樣式的方法

為什麼要美化file控制項?試想一下,別的孩子都穿戴整齊漂亮,其中兩個孩子怎麼都不鳥你,太不和諧了。原始的file控制項是這樣的 別以為這個是由乙個text和乙個button組合成的,它是乙個控制項,html 為 複製 如下 既然這樣我們就用乙個text和乙個button來顯示這個file的樣式,h...

input type file 禁止讓使用者手動輸入

1.取代法 使用隱藏的控制項,然後用乙個唯讀的文字框和乙個按鈕來模擬的功能。html 2.使用指令碼事件限制控制項輸入 將控制項的滑鼠右鍵選單 按鍵事件限制住,不讓使用者有機會輸入。html 3.使用contenteditable屬性 使用該屬性可以有效地限制使用者在控制項中手動輸入內容,而只能通過...