使用新的 FileReader API 和 DataURL 进行 Javascript 预览似乎效率低下

发布于 2024-11-24 01:36:56 字数 197 浏览 1 评论 0 原文

我正在使用新的 FileReader API 在上传之前预览图像。这是使用 DataURL 完成的。但如果图像很大，DataURL 可能会很大。这对我来说尤其是一个问题，因为用户可能一次上传多个图像，而预览这些图像实际上大大减慢了我的浏览器速度，并且实际上使 chrome 崩溃了几次。

在上传之前，除了使用 DataURL 在客户端预览图像之外，还有其他选择吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光清浅 2024-12-01 01:36:56

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

You can also store data on the client's disk (in another location so that you can access the file using JavaScript). This article is quite extensive when it comes to this subject:

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

It's not supported on all browsers though.

You have to request storage space (the file system), then create a file, write data to it, and finally fetch the 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() {});

回复收藏 0 原文

~没有更多了~