使用新的FileReader应用程序接口和数据API进行Javascript预览似乎效率低下

Question

我正在使用新的FileReader应用程序接口在上传之前预览图像。这是使用DataURL完成的。但是，如果图像很大，那么DataURL可能会很大。这对我来说尤其是一个问题，因为用户可能会一次上传多张图片，而预览这些图片实际上会大大减慢我的浏览器速度，实际上还会导致chrome崩溃几次。

在上传之前，除了使用DataURL在客户端预览图像之外，还有什么替代方法吗？

Answer 1

您还可以将数据存储在客户端的磁盘上(存储在另一个位置，以便您可以使用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() {});