アップロード時に選択したファイルをクリア

ファイルを選択前の状態に戻す

jQuery

$(function() { // アップロードするファイルを選択 $('input[type=file]').change(function() { $('#clear').show(); }); // ユーザエージェント var ua = navigator.userAgent; // ファイル参照をクリア $('#clear').click(function() { $('input[type=file]').val(''); // IE バージョン判定 10以下 if (ua.match(/MSIE\s(7|8|9|10)\./i)) { $('#userfile_item').html('<input type="file" name="userfile">'); } $(this).hide(); }); });

<input type="file">に対してのval('')がIE10以下で動作しないので、html()で対応。

CSS

#clear { display: none; }

HTML

<form enctype="multipart/form-data" method="post"> <span id="userfile_item"> <input type="file" name="userfile"> </span> <input type="button" id="clear" value="ファイルをクリアする"> </form>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。