Chrome和Firefox文件上传浏览错误 [英] Chrome and Firefox file upload browse bug

问题描述

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

  browse = function（）{
 $（＃fileAttach）。click（）; 
 var file = $（＃fileAttach）。val（）; 
 $（＃fileName）。val（file）; 
} 
  

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

这里发生了什么，我该如何解决？感谢您的提前。

解决方案

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

我总是显示自己的浏览按钮，并且绝对定位输入[type = file] > opacity：0 。适用于所有浏览器。

In order to have complete UI style over a form type="file" upload, I have a pseudo form field (#fileName), browse, upload button. I have a hidden form below with the actual form field (#fileAttach), browse, and upload buttons. I'm trying to trigger it such that when the user clicks browse, it triggers the actual browse button, and then grab the value of the actual input field's file path and populated the file on the pseudo input field.

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

It works in Safari and IE. However, in Chrome and Firefox it seems to stop executing after the user selects the file. The file name is not passed to the pseudo form field. However, if I fire browse() a second time, it immediately populates the first file path to the pseudo form field, then spawns a new file browse window. Chrome/FF seems to only execute the first line of the function and pause. The 2nd and 3rd line gets executed if the function is called again, etc.

What's going on here and how can I solve it? Thank you in advance.

解决方案

Browsers don't really like you triggering the upload dialog via code, I've found.

I've always just displayed my own browse button and absolutely positioned the input[type=file] over the top with opacity: 0. Works in all browsers.

这篇关于Chrome和Firefox文件上传浏览错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！