1

概要：

input[type=file]Web アプリ全体にいくつかの要素があり、うまく機能します。それらの 99% は問題なく動作しますが、たった今、Firefox で上記の要素をクリックしてもファイル選択ダイアログが表示されないケースに遭遇しました。それが機能する他の状況との大きな違いはありません。その上にクリックできない要素はありません。要素をクリックすると、Firefox独自のボタン押し効果も見られます。

これを明確にするために、「シミュレートされたクリック」はありません。セキュリティ上の理由から、これがまったく機能しないことは承知しています。アップロード要素は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

}
4

2 に答える 2

0

問題が解決しました：

上記の入力フィールドの親ノードの 1 つ (DOM ツリーを参照):

html > body > div#coreApp >* (div#商品ページ) *> 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に感謝します

于 2013-05-24T18:02:03.853 に答える