FileReader, сбой в Chrome

Question

Я пытаюсь осуществить загрузку файлов с помощью dnd и FileReader для предварительного просмотра изображений.Это работает довольно хорошо, а также, если я загружаю несколько файлов одновременно.Но когда я загружаю второй раз изображения> ~ 1,6 МБ, он падает в Chrome (Firefox работает нормально)возможно ошибка в chrome но может кто знает как это решить?Вот пример: http://jsfiddle.net/PTssx/7/

Answer 1

Вместо больших URI данных в мегабайтах вы также можете использовать requestFileSystem для виртуального хранения копии файла на компьютере клиента (в месте, непосредственно доступном для JavaScript).Тогда у вас есть только путь к файлу, который ссылается на фактическое содержимое (так что это не путь к исходному местоположению; он начинается с filesystem:).

С другой стороны, это поддерживается не всеми браузерами,но так как вы уже используете FileReader, я не думаю, что это большая проблема.

Я изменил мой предыдущий ответ , чтобы он вписался в ваш код: http://jsfiddle.net/PTssx/10/.

var img = document.createElement('img');

window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    fs.root.getFile('test.png', {create: true}, function(fileEntry) { // create file
        fileEntry.createWriter(function(fileWriter) {
            var builder = new BlobBuilder();
            builder.append(reader.result); // set file contents
            var blob = builder.getBlob();

            fileWriter.onwriteend = function() {
                img.src = fileEntry.toURL(); // set img src to the file
            };

            fileWriter.write(blob);
        }, function() {});
    }, function() {});
}, function() {});

$('#items').append(img);

Затем вам нужно прочитать файл как ArrayBuffer вместо URI данных:

reader.readAsArrayBuffer(f);

reader.result будет тогда ArrayBuffer.

Примечание: На данный момент в Chrome эта технология реализована как webkitRequestfileSystem и WebKitBlobBuilder.

Answer 2

Я бы избегал FileReader и FileSystem, если бы я был там, где вы есть.Вы можете предварительно просмотреть изображение с помощью img.src = URL.createObjectURL(File)