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に変更して完了。