小粋空間  -  a cheap joke and a play on words site

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

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

１．問題点

フォームの値をリセット（クリア）する場合、通常は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」の値を書き換えることができないようです。

２．値をクリアする方法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

３．値をクリアする方法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

４．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()を利用して、リセットボタンのデフォルト動作（＝全フィールドのリセット）を無効にして、ファイルアップロードフィールドのみをリセットします。