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

來源:互聯網
上載者:User

      常規的Web應用程式中涉及到檔案上傳的部分都不可避免地會使用到<input type="file"/>控制項,在上傳檔案的時候通過點擊“瀏覽”按鈕,在彈出的檔案選擇對話方塊中選擇本地要上傳的檔案。當然,如果你已經知道要上傳的檔案的本地路徑,也可以複製路徑到控制項的輸入框中(例如要選擇的檔案的路徑特別長)。這就存在一個問題,如果你所複製的檔案路徑根本不存在,那麼上傳的時候就無法正確擷取到檔案,而且在javascript中沒有判斷該控制項所選擇的檔案是否存在的方法,涉及到瀏覽器的安全性,大多數時候我們是不能通過javascript來操作用戶端本地檔案的。

      那麼如何解決該問題呢?

      其實在FireFox和IE8中已經對這個控制項進行了相應的限制,如果你在這兩種瀏覽器中查看帶有</input type="file">標籤的頁面,會看到根本不允許使用者直接輸入,而只能通過點擊“瀏覽”按鈕來選擇檔案,這樣就可以有效地確保使用者所選檔案的合法性。但是在IE7和一些低版本的瀏覽器中仍然是可以輸入的,這個時候就需要對這個控制項進行一些限制,下面是可以採用的方法:

1. 替代法

      使用隱藏的<input type="file"/>控制項,然後用一個唯讀文字框和一個按鈕來類比<input type="file"/>的功能。

<input type="file" name="file" onpropertychange="file1.value=this.value" style=display:none/>   
<input type="text" name="file1" readonly/>   
<input type="button" value="瀏覽" id="button1" name="button1" onclick="file.click()"/>

2. 使用指令碼事件節流控制項輸入

      將<input type="file"/>控制項的滑鼠右鍵菜單、按鍵事件節流住,不讓使用者有機會輸入。

<input type="file" onkeydown="return false" onkeyup="return false" oncontextmenu="return false">

3. 使用contenteditable屬性

      使用該屬性可以有效地限制使用者在<input type="file"/>控制項中手動輸入內容,而只能通過檔案選擇對話方塊選擇檔案。

<input type="file" id="file1" contenteditable="false" />

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.