input type=”file”で選択されたファイルをクリア(jQuery)
2013年10月17日
そもそもtype=”text”とかなら、.val()を空にすればいいんですが・・。
type=”file”のクリア方法として、厳密にはinputの初期化は無理なので、新しいinputを追加して、元々あったinputを消す感じになると思います。
inputとクリア用にbutton要素を。
<input type="file" id="file" name="file"> <button id="clear">クリア</button>
で、js。
$('#clear').click( function() { $('#file').after( $('#file').clone(true) ); $('#file').remove(); } );
#clearがclickされたら、#fileの後ろに#fileをコピって、#fileを削除。
動いたーと思いきや・・
上のjsだとFirefoxでクリアされないようです。
挙動としてはFirefoxの方が正しいような気もしますが。
(#idで.cloneしてしまうと、#idが重複してしまうので)
て事で、以下に変更しました。
$('#clear').click( function() { $('#file').after('<input type="file" id="file_new" name="file">'); $('#file').remove(); $('#file_new').attr('id','file'); } );
.cloneするのをやめて、別のid(#file_new)で要素を追加。
元々あった要素(#file)を削除。
最後に#file_newを#fileに変更して完了。