Chrome和Firefox文件上传浏览bug

为了在form type =“file”上传时拥有完整的UI风格，我有一个伪表单字段（#fileName），浏览，上传按钮。我有一个隐藏的表单，实际的表单域（#fileAttach），浏览和上传按钮。我试图触发它，这样当用户单击浏览时，它会触发实际浏览按钮，然后获取实际输入字段文件路径的值，并将该文件填充到伪输入字段中。Chrome和Firefox文件上传浏览bug

browse = function() { 
     $("#fileAttach").click(); 
     var file = $("#fileAttach").val(); 
     $("#fileName").val(file); 
     }

它适用于Safari和IE。但是，在Chrome和Firefox中，用户选择文件后似乎停止执行。文件名不会传递到伪表单字段。但是，如果我第二次激发browse（），它会立即将第一个文件路径填充到伪表单域，然后生成一个新的文件浏览窗口。 Chrome/FF似乎只执行函数的第一行并暂停。如果再次调用函数，则会执行第二行和第三行，等等。

这里发生了什么，如何解决？先谢谢你。

来源

2011-04-28 user728302

浏览器并不真的喜欢你通过代码触发上传对话框，我发现。

我总是只显示我自己的浏览按钮，并绝对定位在opacity: 0顶部input[type=file]。适用于所有浏览器。

来源

2011-04-28 00:16:34 alex

谢谢。但不幸的是，我不能使用这个选项。我有一个巨大的输入表单，其中必须包含文件上传。因此，为了模仿ajax，我在第一个下面放置了第二个隐藏表单。一旦用户选择了文件，我可以如何将路径名复制到伪表单域？ – user728302 2011-04-28 00:22:21

@user我怀疑是否有办法从用户的计算机（或至少是真正的计算机）中提取路径。 – alex 2011-04-28 00:24:41

@alex _“我怀疑是否有从用户计算机（或至少是真实的计算机）提取路径的方法。”_请参阅[HTML5 File API中的FileReader.readAsText如何工作？]（http：// stackoverflow。 COM /问题/ 40146768 /如何-的FileReader-readastext功能于HTML5的文件API-作品） – guest271314 2016-11-09 03:23:00

Chrome和Firefox文件上传浏览bug

回答

相关问题