Chrome 和 Firefox 文件上传浏览错误答案

【问题标题】：Chrome and Firefox file upload browse bugChrome 和 Firefox 文件上传浏览错误
【发布时间】：2011-04-28 00:12:05
【问题描述】：

为了在表单 type="file" 上传时拥有完整的 UI 样式，我有一个伪表单字段 (#fileName)、浏览、上传按钮。我在下面有一个隐藏的表单，其中包含实际的表单字段（#fileAttach）、浏览和上传按钮。我试图触发它，当用户单击浏览时，它会触发实际的浏览按钮，然后获取实际输入字段的文件路径的值并在伪输入字段上填充文件。

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

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

这是怎么回事，我该如何解决？提前谢谢你。

【问题讨论】：

标签： javascript jquery file google-chrome file-upload

【解决方案1】：

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

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

【讨论】：

谢谢。但不幸的是，我不能使用该选项。我有一个巨大的输入表单，其中必须包含一个文件上传。因此，为了模拟 ajax，我在第一个隐藏表单下方放置了第二个隐藏表单。有什么想法可以在用户选择文件后将路径名复制到伪表单字段？
@user 我怀疑是否有办法从用户计算机（或至少是真实计算机）中提取路径。
@alex “我怀疑是否有办法从用户计算机（或至少是真实计算机）中提取路径。”见How FileReader.readAsText in HTML5 File API works?

【解决方案2】：

这就是我的做法。也在处理上传问题，但遇到问题会导致 Option Explicit 语句

Add Record to Database and Upload an Image at the same time (2nd Attempt with different code)

不确定这是否是您要找的。p>

.photodiv{
  padding:8px 16px;
  background:;
  border:0px;
  position:relative;
  color:#fff;
  border-radius:2px;
  text-align:center;
  float:left;
  cursor:pointer
}
.hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;
    
}

&lt;button class="photodiv"&gt;Photo&lt;input type="file" name="attach1" class="hide_file"&gt;&lt;/button&gt;

【讨论】：