新しいFileReader APIとDataURLを使用したJavascriptプレビューは効率が悪いようです

Question

アップロード前に新しいFileReader APIを使用して画像をプレビューしています。これはDataURLを使用して行われます。しかし、画像が大きい場合、DataURLは大量になる可能性があります。ユーザーが一度に複数の画像をアップロードし、実際にブラウザをかなりプレビューして実際にブラウザをかなり遅らせ、実際にクロムを数回クラッシュさせてしまうので、これは特に問題です。

アップロードする前にクライアントで画像をプレビューするためにDataURLを使用する方法はありますか？

Answer 1

クライアントのディスク（別の場所に、JavaScriptを使用してファイルにアクセスできるように）にデータを保存することもできます。それはしかし、すべてのブラウザでサポートされていない

http://www.html5rocks.com/en/tutorials/file/filesystem/

：それはこの主題に来るとき、この資料は非常に広範です。

window.requestFileSystem(window.PERSISTENT, 5*1024*1024, function(fs) { 
    fs.root.getFile(filename, {create: true}, function(fileEntry) { 
     fileEntry.createWriter(function(fileWriter) { 
      var arr = new Uint8Array(data.length); 

      // fill arr with image byte data here 

      var builder = new BlobBuilder(); 
      builder.append(arr.buffer); 
      var blob = builder.getBlob(); 

      fileWriter.write(blob); 

      location.href = fileEntry.toURL(); // navigate to file. The URL does not contain the data but only the path and filename. 
     }); 
    }); 
}, function() {});