input type=file 標簽禁止讓用戶手動輸入


常規的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" />

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM