2

重複の可能性:
JavaScript で、ファイル入力要素に対してプログラムで「クリック」イベントを発生させることはできますか?

シングル クリック アップロードを作成したかったので、次のように <form>内部を非表示にしました (フォームを非表示にするためにタグを<iframe>入力しただけです)。<iframe><form>

<iframe id="iframe" name="iframe" height="1" width="1" frameborder="0">
    <form id="form1" enctype="multipart/form-data" method="post" action="uploaded.php">
        <div class="row">
        <label for="file">Select a File to Upload (up to 20MB)</label><br />
        <input type="file" name="file" id="file" size="40" onchange="uploadFile()" />
        </div>
    </form>
</iframe>

次に、外側に<iframe>ボタンを作成しました：

<div align="center">
    <input type="button" value="Upload" align="center" onclick="browse();" />
</div>

ブラウズ（）JavaScriptはこれです：

function browse()
{
    var iframe = document.getElementById.("iframe");
    var input = iframe.contentDocument || iframe.contentWindow.document;
    input.getElementById('file').click();
}

しかし、それは機能しません。ファイルの参照ダイアログが開きません。私は Firefox 17 を使用しています。<input>内部<iframe>または他のワンクリック アップロード ソリューションで click() する方法はありますが、まだ uploadFile() AJAX 関数を使用していますか?

function uploadFile() {
        var fd = new FormData();
        fd.append("file", document.getElementById('file').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "uploaded.php");
        xhr.send(fd);
      }

編集:これはフォームが iframe にない場合に機能するため、私の質問は click() on を使用できるかどうかではありません<input type="file">。<input type="file">できますし、Firefox 17 で動作しています。私の質問は、内部で click() を使用する方法<iframe>です。

4

2 に答える 2

-1

追加の型があるため、JavaScript はエラーをスローする必要があります。.

var iframe = document.getElementById.("iframe");  
                                    ^-- typo
于 2012-12-17T23:38:15.763 に答える
-1

の子要素は<iframe>、ブラウザーが iframe をサポートしていない場合に使用する代替コンテンツです。それらは、フレームにロードされたドキュメントの一部を形成しません (contentDocumentアクセスするものです)。

あなたの問題 (または少なくとも最初の問題) は、コンテンツを隠すためのハックとしてそれを使用しようとしていることです。そうしないでください。

于 2012-12-18T16:11:24.100 に答える