3

会社の Web フレームワークにある、ブラウザー固有の見苦しいアップロード ボタンを回避しようとしています。

私が作成したのは、フォームを含む非表示の iframe です。iframe の外側に「ファイルを選択」ボタンがあります。ボタンは iframe から入力要素を取得し、それに対して「click()」を呼び出します。

クリックすると、IE と FF でファイル選択ダイアログが開きますが、Chrome では開きません。javascript 関数で iframe 内から「click()」を呼び出しても、Chrome では機能しませんでした。

いくつかのコード例:

ファイルuploadtest.html:

<div id="button" style="background-color:red; height:50px; width:200px;" onclick="clicky()">Browse files</div>
<iframe id="frame" src="fileupload.html" style="display:none"></iframe>

<script type="text/javascript">
    function clicky() {
        var iframe = document.getElementById("frame");
        var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
        innerDoc.getElementById("input").click();
    };   
</script>

ファイルupload.html:

<form>
    <div><input type="file" id="input" multiple/></div>
</form>

iframe を削除し、最初のページ内にフォームを配置するだけで、Chrome は希望どおりにファイル選択ダイアログを開きます。ただし、個別に送信できるように、Web アプリケーションで iframe を使用する必要があります。

「display: none」を削除しても効果はありません。input 要素に onclick 属性を付けると、Chrome の click() イベントでトリガーされます。

iframe 内の入力で「click()」を呼び出すと、Chrome がファイル選択ダイアログを開かないのはなぜですか?

4

1 に答える 1

1

Chrome は、すべてのファイル パスを異なるオリジンとして扱います。サンプルをサーバーでホストすると、Chrome で正常に動作します。このセキュリティ対策を回避するパラメータとして「--allow-file-access-from-files」を使用して Chrome を起動することもできます。

于 2012-09-25T16:30:40.443 に答える