Help us understand the problem. What is going on with this article?

HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた

More than 1 year has passed since last update.

はじめに

みなさんHTMLタグの一つであるinputタグはご存知だと思います。
その中でもtype="file"についてぼくはこんな疑問を持ちました。

選択したファイルはどこのファイル?コピーとかされているの?

これみなさん知っていますか?
ちょこっと調べたんですがなかなか情報がなかったので
いろいろ自分で調査してみました。

(本音は調査が面白そうだったのでそんなに本気で調べてないだけです

仮説を立てる

まずは仮説をいくつか立ててそれぞれを検証していきます

A. ブラウザはファイル参照だけ持っている
B. ファイル選択時にTemp領域へコピーしている
C. メモリ上に抱えている

たぶんこれらのどれかじゃないかなと思っており、
個人的にはBが濃厚だと勝手に考えています。

調査開始

ファイルアップロード機能が必要なので
簡単にファイルをアップロードするだけのアプリを自前で作りました。
https://github.com/taqm/go-simple-fileup

スクリーンショット 2018-12-24 2.03.38.png

これは・・・雑の極みっ・・・!
気にせずこれで検証を行っていきましょう

A. ブラウザはファイル参照だけ持っている 説

まずはこちら検証していきましょう

説の内容

  • ブラウザはアップロード対象ファイルへの参照だけを保持
  • ファイルをアップロードする際は実際のファイルがそのまま送信される

こんなところでしょうか

検証内容

もしブラウザがファイルへの参照を持っているだけならば、
ファイル選択後にファイルを更新したときに更新後のファイルが送信されるはず!

作った検証用アプリを使って検証してみます

まずは適当なテキストファイルを用意します。

sample.txt
hoge

そしてこのファイルを選択後に更新してから送信してみます。

sample.txt(更新後
fuga

結果

送信されたファイルの中身は以下でした

sample.txt
fuga

更新されてる...
あれー?
一番ないと思っていた仮説だったのにいきなりヒット?

では更新だけでなくファイル選択後に、対象ファイルを削除してみましょう

スクリーンショット 2018-12-24 3.00.02.png

なんと!リクエストに失敗してしまいました。

やはりただファイル参照を持っているだけで
実際のファイルへの更新を行うと、選択しているファイルにも影響が起きるようです。

ブラウザごとの挙動

こういう問題はブラウザごとに違うのでは?という疑問が出てきます。
先に述べた実証はChromeで行っていたため
他のブラウザではどうなっているのか見てみましょう

Safari

選択後に、更新した場合
やはり送信されたファイルは更新後の内容になっていました。
Chromeと同じ動きです。

選択後に、削除した場合
削除後に送信した結果、
同名の空ファイルが送信されてしまいました。

Firefox

選択後に、更新した場合
送信されたファイルは更新後の内容になっていました。
ChromeやSafariと同じ動きです。

選択後に、削除した場合
ファイルの送信が行われませんでした。
そもそもファイルが選択されていないような動きになっています。

Microsoft Edge

選択後に、更新した場合
なんと同名の空ファイルが送信されてしまいました。

選択後に、削除した場合
削除の場合も、更新と同様に空ファイルが送信されています。

Internet Exproler 11

選択後に、更新した場合
ChromeやSafari同様に更新後の内容が送信されました。

選択後に、削除した場合
なんと削除前のファイルが正常に送信されるではありませんか。
そして

選択 → 更新 → 削除 → 送信

と操作を行った場合には更新されたファイルが送信されていました。

ブラウザ別の挙動まとめ

ブラウザごとに送信されたファイルをまとめてみます。

  選択後に更新 選択後に削除
Chrome 更新後のファイル エラー発生
Safari 更新後のファイル 空ファイル
Firefox 更新後のファイル 送信せず
Edge 空ファイル 空ファイル
IE11 更新後のファイル 削除前のファイル

バラバラだ

結論

input(type=file)でファイルを選択した場合は
ファイルのへの参照を持っているだけであり、
選択後にファイルを更新・削除を行うと選択したファイルへ反映される。

ただし、反映のされ方はブラウザごとに挙動が異なる。

あとがき

正直ファイルの参照を持っているだけだとは思っていませんでした。
改めて考えてみると、コピーなんてしていたら容量も時間もかかるのでありえないんですが・・・w

でもまあ調査した結果としてはとても面白い内容となったので満足感ありです!
まだIEの細かな仕様やスマホだとどうなのかなど色々気になることもあるので
時間ができたら記事を更新していきます!

追記 

2018/12/25時点での検証結果になるため、ブラウザの更新により挙動が変更される可能性があります。


おしまい

taqm
1児のパパです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした