Question

是否可以阻止用户在IE中输入文件输入文本框？我问的原因是，如果用户输入的文本看起来不像文件系统路径（例如，不是以c：...开头），那么当用户点击提交按钮时，不会发生任何事情。

我要么不允许用户输入框或让表单正常提交。

我发现同样的问题在这里被问到没有答案： http://www.webmasterworld.com/html/3290988.htm

如果没有其他合适的答案，这个人想出了一个我可以使用的黑客： http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

编辑：澄清 - 如果用户在“浏览”按钮旁边的文本框中键入“不是文件路径”并单击提交，则在IE中不会发生任何事情。表单将不会提交 - 当＆lt; input type =“file”＆gt;时，IE不允许提交表单。框没有真正的文件路径。

Answer 1

这个怎么样？您无法键入或右键单击并粘贴。

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

Answer 2

这可能是个坏主意。如果用户没有使用Windows操作系统并想要上传文件/home/user/example.txt怎么办？

这种类型的检查可能更好地实现了服务器端。

Answer 3

我用另一种方式解决了这个问题，使用按钮而不是提交，并在提交之前使用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();
}

我意识到仍然需要对文件进行服务器端验证，但这只是为了防止用户点击“提交”按钮而没有看到任何发生的事情。此外，它假设IE使用Windows操作系统。

Answer 4

一种方法是在提交按钮中放一些小的javascript代码。想法是验证框并停止提交或允许它。

但是，您可能最好只验证文件内容服务器端并将相应的错误反馈给客户端。

Answer 5

input type = file element的value属性是安全问题的readonly。您可以阅读这家酒店并进行检查。如果它与您的规则不符，您将发出警告并让其修改。另一种方法是使用outerHTML属性覆盖它。例如： HTML输入文件元素名为objInputFileElement。 objInputFileElement.outerHTML = “”;

Answer 6

你不能使用

<input ... disabled>

编辑：不，实际上也阻止了提交......但在HTML 4中显然

<input ... readonly>

应该有效。 http://htmlhelp.com/reference/html40/forms/input.html

Answer 7

我找到了解决问题的方法。 contentEditable选项如下：

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

Answer 8

以下是contentEditable选项的演示：

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

Answer 9

我的解决方案基于this thread。

所以，考虑这个文件字段：

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

我在jquery中使用了类似的东西：

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

注意：您必须使用 keydown ，而不是 keypress DEL和BACKSPACE以及任何打印键。

如何在IE中禁用文件输入文本框？

9 个答案: