入力が遅い、ラグがある場合のクイックソリューション[type=file]オープニング

inputタグのタイプfileでファイルをアップロードする際に、inputタグに属性を設定する理由 accpet="image/*" ローカル・フォルダーを開くのが特に遅い？

テストした結果、macのsafari、Firefox、Chrome（operaはなぜか常に点滅している）ではラグがないことがわかりました

Windowsでは、Firefoxはラグがなく、Chromeのみラグがあります。

そして案の定、ラグがなくなりました。

次に、このパッケージが試しているのは accpet="image/jpg" そして案の定、これも引っかからない!!!

どうやら問題は "image/*"

しかし、accpetを書いた本来の意図は、すべての画像をフィルタリングしたい_(:з"∠)_ということでした。

そこで、これを実現し、ユーザーエクスペリエンスを向上させるために、列挙型

修正したコード

<input type ="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"/>

もう一度やってみると、ちゃんとできていますね!

それは、Chromeの セーフブラウジング 関数は、ファイルがアップロードまたは保存されたときにチェックするため

googleへのネットワーク接続が比較的速いのであれば問題ありません。

しかし、接続が遅い場合、または単に膝を打つ場合、セーフ ブラウジングは、ファイル チェックが終了するかタイムアウトするまで、Chrome をしばらくハングアップさせます。

使用方法 accept="image/png, image/jpeg, image/gif" を使えばこの問題は解決します。これらの MIME タイプは セーフブラウジング をホワイトリストの中に入れておくと、チェックする必要がありません。

しかし、次のようなものを使用すると accept="image/*" これはどうでしょう、うまくいかない、動かなくなる可能性がありますね。

input[type=file]の開きが遅くて動かないという問題に対する迅速な解決策をお伝えしたのはこれだけです。