Question

我正在使用用户可以查看/上传本地文件的页面。选择文件后，我将在页面中显示图像。我遇到一个问题，拖动这样的图像会导致我的浏览器窗口崩溃（Chrome）。

简单的html：

<input type='file'>
<img>

Javascript（jQuery）：

$('input').change(function(){
    var file = $('input').get(0).files;
    var fileReader=new FileReader();
    fileReader.onload = function(e){
         $('img').attr('src',e.target.result);
    };
    fileReader.readAsDataURL(file[0]);
});

更多地说，这似乎只是大图像文件的问题（例如来自iPhone的未压缩照片）。这不一定是页面的交易破坏者，但是不小心拖动图像并立即使页面崩溃当然很烦人。

有什么好方法可以解决这个问题吗？

Answer 1

我使用Blob解决了问题：

   if (file !== undefined && window.FileReader !== undefined) {
        var reader = new FileReader();
        var self = this;

        reader.onload = function(e) {
           if (window.Blob) {
                var blob = new Blob([e.target.result]);
                window.URL = window.URL || window.webkitURL;
                var blobURL = window.URL.createObjectURL(blob);
                self.setSrc({"tempUrl" : blobURL}); //using backbone this refers to a model
           }
        };
        reader.readAsArrayBuffer(file);
    } else {
        if (!file)
            console.error("No file prevented");
        if (!window.FileReader)
            console.error("Your browser is not supported");
    }

正如我所见，readAsDataURL杀死了记忆。

在网页中拖动本地图片会导致Chrome崩溃

1 个答案: