在 Chrome 和 Mozilla 中显示选择上传的图像答案

【问题标题】：display image selected for uploading in Chrome and mozilla在 Chrome 和 Mozilla 中显示选择上传的图像
【发布时间】：2012-02-28 04:51:27
【问题描述】：

在我的一个网络应用程序中，我必须使用 javascript 在上传到服务器之前显示选择上传的图像。

我有这段代码......它在 Mozilla 中运行良好。但不是在 Safari 或 Chrome 中.. 请帮助

// Handle file while select a new file
$('#file').change(function(){
        $('#img_size').val((this.files[0].size)/1000000);
                   handleFiles(this.files);
});


// handle files

function handleFiles(files) {





   for (var i = 0; i < files.length; i++) {
    var file = files[i];

    var imageType = /image.*/;

    if (!file.type.match(imageType)) {
        continue;
    }


     var img=document.getElementById('fake_img');
     img.src = file;
     img.onload = function() {



    };



    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(file);
}

}

【问题讨论】：

标签： javascript html google-chrome file-upload

【解决方案1】：

这段代码在 chrome 中运行良好

http://jsfiddle.net/PrNWY/13/

它以 chrome 和 FF 显示所选图像。

更新

您可以使用以下代码检查文件阅读器功能

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
    // Great success! All the File APIs are supported.
    alert('The File APIs are fully supported in this browser.');
 } else {
    alert('The File APIs are not fully supported in this browser.');
 }

在我的 Safari 中它失败了，因为它不完全支持文件 API。

【讨论】：