Input[type=file]が開くのが遅い、カートンの問題を解決する

1698 ワード

昨日、仕事が终わってテストして私にどうしてピクチャーのアップロードのプラグインがフォルダを开くスピードがこんなに遅いのかと闻いて、私に方法を考えて最适化させて、それから私は努力してやりました.(:з」∠)_
私たちの内部システムはieと互換性がないので、私はieを気にしないで、ブラウザの中で游びました.
テストの結果、macではsafari、Firefox、Chrome(operaはなぜフラッシュバックしているのか分からない)にカートンの問題はないことが分かった.
WindowsではFirefoxはカートンではなくChromeカートンしかありません.
しかし、このプラグインは別の項目から借りてきて、画像の種類を限定する機能を加えただけです.元のコンポーネントにはこのカートンの問題はありませんが、問題は画像のタイプを限定する点だけです.
まず私のコードを貼ってください.
 this._imgFile = c}
    onChange={this.handleChange.bind(this)}
    type="file" name="image" disabled={disabled}
/>

そこでとりあえずaccpetを外してみることにしましたが・・・やはりカートンの問題はありませんでした.では、このバッグはaccpet="image/jpg"を試してみてもやはりカカではありません!!問題の所在は"image/*"です
しかし、accpetと書くのは、すべての画像をフィルタリングしたいという意味です.(:з」∠)_では、このニーズを実現し、ユーザー体験を向上させるためには、列挙するしかありません.
修正後のコード
 this._imgFile = c}
    onChange={this.handleChange.bind(this)}
    type="file" name="image" disabled={disabled}
    accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"
/>

もう一度やってみると,やはり妥当だ.
でも一体どうしてこんなカードを?万能のStack Overflowを調べました→_→
ChromeのSafeBrowsing機能はアップロードや保存時にファイルをチェックするので、ネットがgoogleに接続する速度が速いと問題ありません.しかし、接続が遅くなったり、ひざまずいたりすると、SafeBrowsingはChromeをファイルチェックが終了したり、タイムアウトしたりするまでしばらく保留します.accept="image/png, image/jpeg, image/gif"を使用すると、これらのMIMEタイプはSafeBrowsingのホワイトリストにあり、チェックする必要はありません.でもaccept="image/*"のようなものを使うとダメなので、カカになる可能性があります.