前回に引き続き、IE10対応のメモです。

input[type="file"]にファイルをアップロードした後、モダンブラウザ？だと$(this).val('')などでvalueを初期化できるのですが、IE10はそうはいきませんでした。

<input type="file" id="sample">

みたいなhtmlがあったとして、「サンプル.PNG」というファイルをアップロードしたとして、その後に開発者ツールのコンソールから以下を打っても

$('#sample').val('');
console.log($('#sample'));
→ "C:\fakepath\サンプル.PNG"

と帰ってきます。セキュリティ上の問題で、上書きは出来ないようです。

$('#sample').on('change', funcition(){ // do something });

という感じで、新しいファイルをアップロードしたら、別の関数の処理が走るようになっていたのですが、肝心のvalue値が変わらないので、処理が走らず、新規でファイルをアップロードできませんでした。

以下、解決内容です。

$target = $('#sample');
$target.wrap('<form>').closest('form').get(0).reset();
$target.unwrap();

上記の内容を、削除ボタンなどの、インプットファイルを初期化するイベントが発火した後に実行します。

▼参考

https://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery

input[type="file"]の名前・呼び方

input[type="file"] のことをなんと呼べばよいのか、共通の言葉があるのか探した所「ファイルコントロール」や「ファイル選択コントロール」、「ファイルフィールドコントロール」などと呼ばれていました。

JavaScriptプログラミング講座【ファイル選択コントロールについて】
File Field コントロールを使用してのファイルのアップロード