web-dev-qa-db-ja.com

InternetExplorerのファイル入力ボックスをクリアする

ページにファイルアップロードボックスとクリアボタンがあります。クリアボタンを押すと、ファイルアップロードボックスのテキストがクリアされます。

以下はFirefoxで機能しますが、IE（テキストはそこに残ります）では機能しません）。これに対する回避策はありますか？

$("#clear").click( function() {
    $("#attachment").val("");
    //document.myform.attachment.value = "";
})

HTML：

<form name="myform">
    <input type="file" name="attachment" id="attachment" />
</form>
<br /><button id="clear">Clear Attachment</button>

jsFiddle

javascriptjqueryhtmlinternet-explorerfile-upload
16
tskuzzy

IE8以降 では読み取り専用なので、クリアできません。このセキュリティ機能を回避する最も簡単な方法は、要素をコピーに置き換えることです。

編集同じアプローチを示唆するこれに対する以前の答えを見つけました！ jQueryを使用して<input type = 'file' />をクリアする

9
andyb

私が見つけた解決策の1つは、単に次のことを行うことです。

 document.getElementById（ 'myUploadField'）。parentNode.innerHTML = document.getElementById（ 'myUploadField'）。parentNode.innerHTML;

動作しないはずのようですが、動作します。

18
Maxx

このソリューションは、入力要素のクローンを作成するよりも洗練されています。要素の周りに<form>をラップし、フォームでresetを呼び出してから、unwrap（）を使用してフォームを削除します。上記のclone（）ソリューションとは異なり、最後に同じ要素が表示されます（それに設定されたカスタムプロパティを含む）。

Opera、Firefox、Safari、ChromeおよびIE6 +でテストおよび動作しています。type= "hidden"を除く他のタイプのフォーム要素でも動作します。

http://jsfiddle.net/rPaZQ/

function reset(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}​
14
slipheed

これは私のために働いた：

 $("input[type='file']").replaceWith($("input[type='file']").clone(true));
3
Anand Kumar

単純なJavaScriptを使用します。

formname.reset();

デモを参照してください： http://jsfiddle.net/rathoreahsan/YEeGR/

2
Ahsan Rathod

以下の方法で入力ファイルをクリアしてみてください。

このスクリプトを含めます。

 <script>
 function clearFileInputField(tagId) {
 document.getElementById(tagId).innerHTML =
    document.getElementById(tagId).innerHTML;
}
</script>

HTMLを次のように変更します。

<div id="uploadFile_div">
<input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>`
1
Sudharsan

昔ながらの<input type="reset" value="clear this">を使用する

0
Diodeus - James MacFarlane