chromeのファイルアップロードのキャンセル押した時の動きを変えたい

Question

ご覧いただきまして、誠に有難う御座います。

ファイルタグのアップロードでファイルを変える時の問題です。

１．chromeブラウザで「ファイルを選択」ボタンを押して、ファイルを選択します。

２．画面にファイル名が表示されます。

３．「ファイルを選択」ボタンを押して、ファイル選択しないで「キャンセル」ボタンを押します。

４．画面のファイル名が消えます。

期待値

chromeではキャンセルボタン押した時、ファイル名が消えませんが、
IEとFFではファイル名が消えないので（chromeのバグとは思えませんが）ファイルキャンセル後ファイル名が消えないように修正したいです。

jQueryを使ってできますでしょうか？

サンプルページは以下になります。
https://jsfiddle.net/713hoya/x9t9at8r/

よろしくお願いいたします。

Answer 1

jQuery File Upload Demo(code) でいけるとはおもうけどどうでしょう

Comments

[stmkza]

たしかにその通りですね。

[super]

貴重なご意見有難う御座います。
確実にファイル選択を制御できるライブラリーだと思います。
今回はchromeデフォルトのファイルアップロードを利用したいため、他の案にしたいと思います。説明が足りなくすみませんでした。

Answer 2

標準の挙動は変えられないと思います。（特にファイル周り）

1. ファイルを選択されたタイミングで新たに <input type="file"> を生成し、以前のものの上にかぶせる
2. マウスオンするまで非表示にしておく
3. それが選択されたら、前の <input type="file"> を削除

とかどうでしょうか。

Comments

[super]

ご意見有難う御座います。
ファイルタグのクローンを持つ方法で実装してみたいと思います。
有難う御座います。

Answer 3

クローンとかしなくても、アップロード時にinput内のvalueを消せば、この事象は発生しないですね。
https://qiita.com/_Keitaro_/items/57b1c5dd36b7bed08ad8

Answer 4

おそらくそれはできません。なぜならこの機能を実装するにはJavaScriptからアップロードするファイルを変更する必要があります。
それができたら、例えば送信ボタンを押したらアップロードするファイルを "ユーザーのPCに入っている機密情報のファイル" に自動的に変更してから送信するようにもできるからです。

Comments

[super]

貴重なご意見有難う御座います。