此代码不起作用（它与 <input type="file" /> 有关）答案

【问题标题】：This code doesn't work (it has to do with <input type="file" />)此代码不起作用（它与 <input type="file" /> 有关）
【发布时间】：2009-08-20 07:21:07
【问题描述】：

这段代码应该在在 IE 中工作，但它不能。（请不要在 Firefox 中测试它，因为我不会在其中使用这种方法。）我会触发打开的对话，但我现在想要的是在用户进行选择时在跨度内显示附件的名称。有什么帮助吗？

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>

【问题讨论】：

何时显示文件名？
我不知道为什么我们不能在 Firefox 中测试它，但它在 Firefox 上不起作用。
(@Randell) 你可以在任何地方进行测试，但我为 Firefox 实现了另一个解决方案。此方法仅适用于 IE。请试一试看看。我希望在用户选择文件时（从打开的对话框中）显示名称。谢谢！

标签： jquery file-io

【解决方案1】：

出于安全原因，您无法从 JavaScript 访问 input=file 元素。不允许 JavaScript 读取用户驱动器上的文件，并且 type=file 输入允许您执行此操作。

如果您允许人们使用 javascript 访问文件输入，则没有什么可以阻止他们复制您的密码文件并对其进行破解。

我找到了描述 JavaScript 安全性的 article

【讨论】：

我知道，我知道，但我说的是 IE。尝试使用更简单的方法，看看它是如何访问 input=file 的。例如：这里是文件名 //get file input var $el = $('input[type=file'); //将下一个兄弟（span）文本设置为输入值 $el.next().text( $el.val() );
我的答案适用于所有浏览器。可能绕过它的唯一方法是在 IEHTA 或 Firefox Chrome 窗口中运行它，但我认为你仍然会被浏览器/JavaScript 安全性阻止
请复制粘贴以上代码，在IE6或IE7中运行。如您所见，IE 让我触发 input="file"。但是，我无法更新以显示已浏览的文件。
由于 JavaScript 安全性而无法触发
你没有复制粘贴吧？ =) 确保在 IE 中进行测试并更新 jquery.js 路径。我只是再次测试它，它触发了我告诉你的浏览对话框。仍然停留在问题上。

【解决方案2】：

您不能通过 javascript 调用文件上传。我知道，你应该可以，哦，好吧。有一个解决方案 - 使用 opacity:0 来“隐藏”文件输入，在它下面放一些东西，所以看起来你正在点击其他东西。

PPK shows you how do to it and goes through all the ins and outs on quicks blog

【讨论】：

哦，你可以在 IE 中。就像复制粘贴一样简单（仅在 IE 中）。此方法仅适用于 IE（不适用于 Firefox）。