フォームの<input type="file" />の値をjQueryでリセット(クリア)する方法

フォームの<input type="file" />の値をjQueryでリセット(クリア)する方法

Posted at January 24,2012 1:55 AM
Tag:[jQuery]

フォームの<input type="file" />の値をjQueryでリセット(クリア)する方法を紹介します。

jQueryでリセットする

1.問題点

フォームの値をリセット(クリア)する場合、通常はtype属性が「reset」のボタンですべてクリアできます。<input type="file" />の値も同様にリセットされます。

HTML

<form id="bar" action="foo.cgi">
    <input type="file" />
    <input type="reset" value="リセット" />
</form>
サンプル1

JavaScript(jQuery)でリセットしたい場合、次のように記述すればいいように思われます。

HTML

<form id="bar" action="foo.cgi">
    <input type="file" id="file" />
    <input type="button" value="リセット" />
</form>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=button]').click(function(){
    $('#file').val('');
});
</script>
サンプル2

Firefoxやchromeでは期待する動作になるようですが、IEではブラウザの仕様(セキュリティ?)で、type属性「file」の値を書き換えることができないようです。

2.値をクリアする方法1

クロスブラウザでtype属性「file」の値をクリアするには、次の方法で実現できます。厳密にはクリアではなく、replaceWith()で要素を置き換えています。

HTML

<form id="bar" action="foo.cgi">
    <input type="file" id="file" />
    <input type="button" value="リセット" />
</form>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=button]').click(function(){
    $('#file').replaceWith('<input type="file" id="file" />');
});
</script>
サンプル3

3.値をクリアする方法2

2項よりHTMLマークアップがやや冗長になりますが、次の方法でもクリアできます。

HTML

<form id="bar" action="foo.cgi">
    <span id="file"><input type="file" /></span>
    <input type="button" value="リセット" />
</form>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=button]').click(function(){
    $('#file').html($('#file').html());
    // または $('#file').html('<input type="file" />');
});
</script>
サンプル4

4.resetボタンでクリアする

本題からそれますが、type属性「reset」のボタンでファイルアップロードフィールドのみをリセットする場合は次のようにします。

HTML

<form id="bar" action="foo.cgi">
    <input type="file" id="file" />
    <input type="text" id="text" />
    <input type="reset" value="リセット" />
</form>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$('input[type=reset]').click(function(){ 
 
    // resetボタンのデフォルト動作(フォーム全体のクリア)を抑止
    e.preventDefault(); 
    $('#file').replaceWith('<input type="file" id="file" />');
});
</script>
サンプル5

preventDefault()を利用して、リセットボタンのデフォルト動作(=全フィールドのリセット)を無効にして、ファイルアップロードフィールドのみをリセットします。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)