input type=”file”で選択されたファイルをクリア(jQuery)

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

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください