在使用 IE9 上传之前在 Div 中预览图像答案

【问题标题】：Preview an Image in Div before its uploaded using IE9在使用 IE9 上传之前在 Div 中预览图像
【发布时间】：2016-07-23 04:03:24
【问题描述】：

如何在上传之前预览图片。预览动作应该在所有浏览器中执行，而不是使用 Ajax 来上传图片。

大多数示例都使用 FileReader，它在 IE9 中不起作用。

是否有任何插件或任何替代方法可以使其在 IE9 中运行

  f (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}

【问题讨论】：

标签： javascript jquery internet-explorer file-upload jquery-file-upload

【解决方案1】：

这是更新后的代码。希望它对你有用。

if (input.files && input.files[0]) {
     var url = URL.createObjectURL(input.files[0]);
     $('#blah').attr('src', url);
}

【讨论】：

【解决方案2】：

JavaScript：

$('#fileID').on('change',function(){ }
    var imageName = '';
    if (this.files && this.files.length > 0) {
        imageName = this.files[0].name;
    }
    else if (this.value) {
        imageName = this.value;
    }
    if (window.FileReader) {
        //as same as other samples
    }
    else{
        var image = document.getElementById('imgItem');
        image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='" + imageName + "')";
        image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
    }

//code end

我发现这在 emulation-IE9 中效果很好。

另一种绘制图像的方法：

var canvas = document.getElementById('imgArea');
var img = new Image();
img.src = imageName;
img.onload = function () {
　　var ctx = canvas.getContext("2d");
　　ctx.drawImage(img, 0, 0, 200, 200);
}

注意：添加 2017/12/27

使用 IE-9 预览本地图像的一种解决方案： IE-9 不支持 FileReader，所以我尝试先上传它，然后将 imageName（带服务器路径）返回给 View 以更改 img 的 'src' 属性。而且效果很好。

要点：（示例是使用MVC）

1.在input-type-file的'change'事件中，做ajaxSubmit(action method:void)

2.在Controller中，使用[Newtonsoft.Json.JsonConvert.SerializeObject]，返回json格式的字符串。

Response.Write(strData);

3.在ajaxSubmit的回调中，只需更改img的src即可。（不要忘记将结果转换为 json）

【讨论】：