1

概括：

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

为了清楚起见，没有“模拟点击”。我知道出于安全原因，这根本不起作用。上传元素封装在overflow:hidden;-Divs 中，覆盖具有较高 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

}
4

2 回答 2

2

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

input {background-color: #FFF}

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

于 2013-07-06T08:44:29.723 回答
0

问题解决了：

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

html > body > div#coreApp >* (div#productpage) *> div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input

分配了以下 jQuery click 事件：

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

这导致 Firefox 不再对文件输入做出反应。

我将把它留在这里，以防其他人遇到这个问题，因为我花了 3 天时间来扭转。

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

于 2013-05-24T18:02:03.853 回答