8

是否可以阻止用户在 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 中不会发生任何事情。表单不会提交 - 当 <input type="file"> 框没有真实的文件路径时，IE 不允许提交表单。

4

9 回答 9

7

这个怎么样？您不能键入，也不能右键单击并粘贴。

<input type="file" name="file" onKeyDown="this.blur()" onContextMenu="return false;">
于 2009-04-09T04:15:07.777 回答
2

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

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

于 2009-02-26T18:09:59.153 回答
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();
}

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

于 2009-02-26T21:38:38.887 回答
1

一种方法是在提交按钮中添加一些 javascript 代码。这个想法是验证盒子并停止提交或允许它。

但是，您最好只验证文件内容服务器端并将适当的错误返回给客户端。

于 2009-02-26T18:04:45.267 回答
1

对于安全问题，输入类型=文件元素的值属性是只读的。您可以阅读此属性并进行检查。如果它不符合您的规则，您将给出警告并让人修改它。另一种方法是使用 outerHTML 属性覆盖它。例如：名为 objInputFileElement 的 HTML 输入文件元素。objInputFileElement.outerHTML="";

于 2011-03-09T03:29:53.383 回答
0

你不能用

<input ... disabled>

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

<input ... readonly>

应该管用。http://htmlhelp.com/reference/html40/forms/input.html

于 2009-02-26T18:04:15.690 回答
0

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

<input type="file" name="name" contentEditable="false"/>
于 2012-04-10T16:02:14.083 回答
0

这是该contentEditable选项的演示：

<input type="file" name="name" contentEditable="false" />
于 2012-04-10T16:22:41.843 回答
0

我的解决方案基于这个线程。

因此，考虑到这个文件字段：

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

我让它在 jquery 中使用这样的东西：

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

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

于 2015-02-17T18:04:00.943 回答