jQuery:Firefox 不在某些输入 [type=file] 元素上显示文件选择对话框

Question

总结:

我的网络应用程序中有多个input[type=file]元素，它们运行良好。好吧，其中 99% 都工作得很好，但就在刚才，我遇到了一个案例，当我单击所述元素时，Firefox 不显示文件选择对话框。我没有注意到与它确实有效的其他情况有任何显着差异。它上面没有不可点击的元素，您甚至可以在点击该元素时看到 Firefox 自带的按钮按下效果。

为了清楚起见，没有“模拟点击”。出于安全原因，我知道这根本不起作用。上传元素封装在 overflow:hidden;-Divs 中，覆盖具有更高 z-index 和容器大小的整个内容。你肯定会点击按钮，这在我使用这种技术的任何地方都有效。

只是不是在下面的情况下，我似乎找不到原因，因为 2 天了。抱歉内联 CSS，当问题本身解决后，我会把它移到类中。

任何能引导我找到此问题原因的提示都将非常感激不尽。

uploader 负载注入(inject)器:

function _initThumbUploader()
{
// (1)
$iframe = $("<iframe />").attr(
{
    "name":     "thumb_uploader_target",
    "id":       "thumb_uploader_target",
    "class":    "upload_iframe_target"
}).css(
{
    "width":    "1px",
    "height":   "1px",
    "opacity":  "0",
    "display":  "block",
    "border":   "0px none"
});

// (2)
$uploadform = $("<form />").attr(
{
    "id":       "thumb_uploader_src",
    "method":   "post",
    "enctype":  "multipart/form-data",
    "name":     "thumb_uploader_src",
    "target":   "thumb_uploader_target",
    "action":   "/database/uploadproductpic"    
}).css(
{
    "position": "absolute",
    "left":     "0px",
    "top":      "0px",
    "opacity":  "1"
});

// (3)
$fileinput = $("<input />").attr(
{
    "class":    "upload_triggers",
    "type":     "file",
    "name":     "upthumb",
    "size":     "1",
    "accept":   "image/*"
}).css(
{
    "left":         "0px",
    "margin-left":  "-500px",
    "z-index":      "100005",
    "font-size":    "128pt",
    "position":     "absolute",
    "top":          "0px",
    "width":        "600px",
    "height":       "340px",
    "opacity":      "0",
    "cursor":       "pointer"
});

// 4
$appinput = $("<input />").attr(
{
    "name":     "app",
    "type":     "hidden",
    "value":    "products"
});

// 5
$idinput = $("<input />").attr(
{
    "name":     "productid",
    "type":     "hidden",
    "value":    "-1"
});

// Append 3, 4, 5 to 2
$uploadform.append($fileinput);
$uploadform.append($appinput);
$uploadform.append($idinput);

// Append everything to the uploader box
$(".thumbUploader").append($iframe).append($uploadform);

// Install onchange trigger
// TODO

}    

Answer 1

我认为问题可能是由于最近对 FF22 和 23 中的输入 [type="file"] 进行了重新配置，这与 jQuery 无关。 FF 开发人员决定不使用输入框，现在在“浏览...”按钮旁边显示一条简单的文本消息。我看不出他们试图用这个解决什么问题，但是当你的表单有一个深色背景时它现在是一个问题 - 如果你的字体颜色与标准/默认白色表单输入背景颜色相对应，它可能会变成当用于框外的文本时不可见(或显示为“破损”，因为它对比度低)。潜在地，这可能使我们需要使用仅适用于该浏览器最新版本的规则来定位此类输入，但更简单的解决方案是为所有输入定义背景颜色，即使这是默认的白色:

input {background-color: #FFF}

在您的 CSS 中。我已经提议这现在应该成为 normalise.css 的一部分，但我真的希望 FF 开发者将白色的 BG 作为默认设置 - 这至少会使文本可见。更好的是，恢复原样 - 它没有损坏!