Question

我正在尝试使用dnd和FileReader实现文件上传以进行图像预览。它工作得很好，如果我上传多个文件。但是，当我上传第二次图像＆gt; ~1,6MB它在Chrome中崩溃（firefox运行正常）。可能是chrome中的一个bug，但也许有人知道如何解决这个问题？这是一个例子： http://jsfiddle.net/PTssx/7/

Answer 1

您可以使用requestFileSystem代替MB大型数据URI，在客户端的计算机上虚拟存储该文件的副本（在JavaScript可直接访问的位置）。然后，您只有一个引用实际内容的文件路径（因此这不是原始位置的路径;它以filesystem:开头。）

然后所有浏览器都不支持此功能，但由于您已经在使用FileReader，我认为这不是一个大问题。

我修改了我的previous answer以使其适合您的代码：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)

即可预览图像

FileReader，在Chrome中崩溃

2 个答案: