重複の可能性:
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>
です。