web-dev-qa-db-ja.com

jQuery：Firefoxで<input type = "file" />のクリックのシミュレーションが機能しませんか？

可能性のある複製：
JavaScriptでは、ファイル入力要素に対して「クリック」イベントをプログラムで起動できますか？

私はこのようなウェブページを持っています

<html>
    <head>
        <title>File Upload Click Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>
        <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div>
        <input type="file"></input>
    </body>
</html>

私の目標は、divでfile inputのクリックイベントを発生させることです。これはIEとChromeで期待どおりに機能するようです。ただし、Firefoxでは機能しません（divをクリックしてもファイルブラウザが開きません）。

これをFFで動作させる方法はありますか？

javascriptjqueryhtmlfile-upload
30
kristian

FFでこれを機能させる方法はありますか？

いいえ、ほとんどの一般的なバージョンのIEでは動作しません。 IEはダイアログを開きますが、ファイルを選択すると、フォームは実際に送信されません。

希望を捨てる。ファイルアップロードボックスを偽造する唯一の方法は、透過性のテクニックを使用することです。ブラウザはファイルアップロードボックスを内部で異なるレイアウトにする可能性があるため（または、参照ダイアログを含まないファイルアップロードコントロールを提供するため）動作不能なフォームになってしまう可能性が高くなります。

灰色のファイルアップロードフィールドを気に入ってください。または、プログレッシブエンハンスメントを使用して、可能な場合はFlashに置き換えてください。

34
bobince

これが回避策（FF）です。 HTMLビット：

<label>Upload Business Logo</label>
<input type="file" name="logo" id="logo" class="file-upload" />
<input type="text" id="text-logo" class="text-upload" readonly/>
<input type="button" id="btn-logo" class="btn-upload" alt="" />

入力ファイルタイプのCSS：

.file-upload { display:none; }

JQueryビット：

//bind click
$('#btn-logo').click(function(event) {
  $('#logo').click();
});

//capture selected filename
$('#logo').change(function(click) {
  $('#text-logo').val(this.value);
});

フォームの送信時に、非表示の入力ファイルがファイルをアップロードします。お役に立てれば ：）

22
Design Kanya