Question

要点：

我的网络应用中有几个input[type=file]元素，运行良好。好吧，其中99％的工作正常，但刚才，我遇到了一个案例，当我点击所述元素时Firefox没有显示文件选择对话框。我没有注意到其他情况有任何显着差异，它确实有效。它上面没有不可点击的元素，你甚至可以看到firefoxes在点击元素时拥有按钮效果。

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

只是不在以下情况，我似乎无法找到2天以来的原因。对于内联CSS很抱歉，当问题本身解决时，我会把它移到类中。

导致我出现此问题的任何提示都会非常赞赏。

上传器有效负载注入器：

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开发人员决定不使用输入框，现在在Browse ...按钮旁边显示一条简单的文本消息。我无法看到他们正在尝试解决这个问题，但是当你的表单背景很暗时现在是一个问题 - 如果你的字体颜色与标准/默认白色表单输入背景颜色相反，它可能会变成当用于框外的文本时，不可见（或显示为“破碎”，因为它是低对比度）。潜在地，这可能使我们需要针对此浏览器的最新版本的规则来定位此类输入，但更简单的解决方案是为所有输入定义背景颜色，即使这是默认的白色：

input {background-color: #FFF}

在你的CSS中

。我已经建议现在应该成为normalise.css的一部分，但我真的希望FF开发者将默认的BG放入其中 - 至少可以使文本可见。更好的是，恢复原样 - 它没有被打破！

Answer 2

问题已解决：

所述输入字段的父节点之一（参见DOM树）：

html > body > div#coreApp >的 * （DIV＃productpage） * > div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input

已分配了以下jQuery点击事件：

/* ... */ $elem.click(function(e){ if (e.target !== this) { return false; } /* ... */ } /* ... */

这导致firefox不再对文件输入作出反应。

我会留下这个，以防其他人遇到这个问题，因为我花了3天时间才能倒转。

感谢大家的时间，特别感谢@roasted

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

2 个答案: