Javascript 从文件输入加载数据时base64的替代方案

我目前正在使用HTML5文件输入法读取一个文件

当文件被加载时，我抓取它的

src

（在我将它定义为

图像之后），并将该src直接放入
div的
背景图像
属性中。

我记录了src，它似乎是一个Base64字符串

不幸的是，将文件编码到base64存在问题，Android手机内存不足（它们会挂起浏览器）。

读取文件时是否可以不将其编码为Base64
使用另一种更节省内存的方式显示它


这是我目前使用的：

   function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                $("#alertBox").show();
                $("#alertBox").html("Oops! The link is NOT a valid image");
                window.setTimeout(function () {
                    $("#alertBox").hide()
                }, 3000);
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    var span = e.target.result;
                    uploadedImg = new Image();
                    uploadedImg.src = e.target.result;
                    uploadedImg.onload = function () {
                        changeSelectedImg(uploadedImg.src);//This is the function I use to change the background-image of a div with the src of the uploaded file, which is B64
                        proceedToView("2") 
                    }
                };
            })(f);
            reader.readAsDataURL(f);
        }
}

使用window.URL创建对象URL而不是dataURL：

function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                $("#alertBox").show();
                $("#alertBox").html("Oops! The link is NOT a valid image");
                window.setTimeout(function () {
                    $("#alertBox").hide()
                }, 3000);
                continue;
            }
            var uploadedImg = new Image();
            uploadedImg.onload = function () {
               changeSelectedImg(uploadedImg.src);
               proceedToView("2") ;
            };//end onload
            uploadedImg.src = URL.creatObjectURL(f);
        }//next
}

只要浏览器支持window.URL:
就可以删除整个FileReader部分，只需使用。。。new Image（）.src=URL.createObjectURL（f）；window.url比dataurl快得多，你甚至不必弄乱异步代码。@dandavis谢谢，你能在回答中再解释一下吗？很好，谢谢，伙计-我不是Canuse，我看到Android浏览器需要一个前缀-webkit。我认为前缀只适用于CSS，它与此有什么关系？我在问，因为Android浏览器是我的目标。这在代码顶部显示了如何回退到webkit前缀：，但它只是window.URL=window.URL | | window.webkitURL；另外，您可能需要调用window.URL.revokeObjectURL（strURL）；最后一次分配url后，从changeSelectedImg（）函数内部清除长时间运行页面上的ram。