2009-02-26 58 views
8

是否有可能阻止用戶在IE中輸入文件輸入文本框?我問的原因是,如果用戶輸入的文本看起來不像文件系統路徑(例如,不是從類似於c:的東西開始),那麼當用戶單擊提交按鈕時,什麼都不會發生。如何在IE中禁用文件輸入文本框?

我想要不讓用戶在框中輸入或正常提交表單。

我發現了同樣的問題在這裏問有沒有答案: http://www.webmasterworld.com/html/3290988.htm

這個人想出了一個黑客其中,如果沒有其他合適的答案,我可以使用: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

編輯:澄清 - 如果用戶在「瀏覽」按鈕旁邊的文本框中鍵入「不是文件路徑」,並單擊提交,在IE中什麼都不會發生。表單不會提交 - 當<輸入類型=「文件」>框沒有真實文件路徑時,IE不允許提交表單。

回答

2

我用另一種方式解決了這個問題,使用按鈕而不是提交併使用JavaScript在提交之前檢查值。

<input type="file" name="inputFile"> 
<input type="button" onclick="if(fileHasValidPath()) { submitForm(); }" value="Submit"> 

function fileHasValidPath() { 
    if (isIE()) { 
    var inputFile = document.forms[0].inputFile; 
    if (inputFile.value != "" && /^(\w:)|(\\)/.test(inputFile.value)) { 
     alert("File is not a valid file. Please use the Browse button to select a file."); 
     inputFile.select(); 
     inputFile.focus(); 
     return false; 
    } 
    } 

    return true; 
} 

function submitForm() { 
    document.forms[0].submit(); 
} 

我意識到仍有需要爲文件服務器端驗證,但是這僅僅是防止對Submit按鈕,並沒有看到什麼情況發生用戶點擊。另外,它假定使用Windows操作系統的IE。

0

你不能使用

<input ... disabled> 

編輯:沒有,實際上是阻止提交以及...但在HTML 4顯然

<input ... readonly> 

應該工作。 http://htmlhelp.com/reference/html40/forms/input.html

+0

這會禁止用戶實際單擊「瀏覽」按鈕選擇文件。我仍然希望他們能夠選擇一個文件。 – 2009-02-26 18:05:51

+0

哦......那麼沒關係;-) – 2009-02-26 18:07:24

1

一種方法是在onsubmit按鈕上放一點javascript代碼。這個想法是驗證盒子並停止提交或允許。

但是,您可能最好只驗證文件內容服務器端並將合適的錯誤提交給客戶端。

2

這可能是一個壞主意開始。如果用戶沒有使用Windows操作系統並想上傳文件/home/user/example.txt會怎麼樣?

這種類型的檢查可能會更好地實現服務器端。

+0

不在服務器上,它應該在瀏覽器上......當然,如果HTML設計更加安全。 – Javier 2009-02-26 19:15:33

+1

用戶可以篡改HTML/Javascript並仍然提交不符合網頁檢查內容的文件。確保它的唯一方法是檢查它在服務器端。客戶端在一段時間和服務器資源下仍然可以很好地保存非篡改用戶。 – 2009-02-26 19:27:35

7

這個怎麼樣?您無法輸入,或右鍵點擊並粘貼。

<input type="file" name="file" onKeyDown="this.blur()" onContextMenu="return false;"> 
1

對於安全問題,input type = file元素的value屬性是隻讀的。你可以閱讀這個屬性並做一個檢查。如果它不符合你的規則,你會發出警告並讓人修改它。 使用outerHTML屬性的另一種方式覆蓋它。例如: : 稱爲objInputFileElement的HTML輸入文件元素。 objInputFileElement。outerHTML = 「」;

0

我找到了解決您的問題的選項。是contentEditable選項,如下所示:

<input type="file" name="name" contentEditable="false"/> 
0

這裏是contentEditable選項的示範:

<input type="file" name="name" contentEditable="false" /> 
0

我根據我的this thread解決方案。

因此,考慮該文件中的字段:

<input type="file" id="file_field"> 

我得到了它的jQuery的是這樣工作的:

$(document).ready(function() { 
    $('#file_field').bind("keydown", function(e) { 
     e.preventDefault(); 
    }); 
}); 

注:您必須使用的keydown代替keypress因爲它覆蓋了DEL和BACKSPACE以及任何打印鍵。

相關問題