Предварительный просмотр Javascript с помощью нового FileReader API и DataURL кажется неэффективным - PullRequest
Новая
       31

Предварительный просмотр Javascript с помощью нового FileReader API и DataURL кажется неэффективным

4 голосов
/ 17 июля 2011

Я использую новый API FileReader для предварительного просмотра изображений перед загрузкой.Это делается с помощью DataURL.Но DataURL могут быть массивными, если изображения большие.Это особенно проблема для меня, так как пользователь может загружать несколько изображений одновременно, а предварительный просмотр связки фактически значительно замедлил работу моего браузера и несколько раз приводил к краху Chrome.

Есть ли альтернатива использованию DataURL для предварительного просмотраизображения на клиенте перед загрузкой?

1 Ответ

3 голосов
/ 17 июля 2011

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

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

Это поддерживается не во всех браузерах.

Вы должны запросить место для хранения (файловую систему), затем создать файл, записать в него данные и, наконец, получить URL: 

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() {});
...