Input[type=file]が開くのが遅い、カートンの問題を解決する
1698 ワード
昨日、仕事が终わってテストして私にどうしてピクチャーのアップロードのプラグインがフォルダを开くスピードがこんなに遅いのかと闻いて、私に方法を考えて最适化させて、それから私は努力してやりました.(:з」∠)_
私たちの内部システムはieと互換性がないので、私はieを気にしないで、ブラウザの中で游びました.
テストの結果、macではsafari、Firefox、Chrome(operaはなぜフラッシュバックしているのか分からない)にカートンの問題はないことが分かった.
WindowsではFirefoxはカートンではなくChromeカートンしかありません.
しかし、このプラグインは別の項目から借りてきて、画像の種類を限定する機能を加えただけです.元のコンポーネントにはこのカートンの問題はありませんが、問題は画像のタイプを限定する点だけです.
まず私のコードを貼ってください.
そこでとりあえず
しかし、
修正後のコード
もう一度やってみると,やはり妥当だ.
でも一体どうしてこんなカードを?万能のStack Overflowを調べました→_→
ChromeのSafeBrowsing機能はアップロードや保存時にファイルをチェックするので、ネットがgoogleに接続する速度が速いと問題ありません.しかし、接続が遅くなったり、ひざまずいたりすると、SafeBrowsingはChromeをファイルチェックが終了したり、タイムアウトしたりするまでしばらく保留します.
私たちの内部システムは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/*"
のようなものを使うとダメなので、カカになる可能性があります.