在使用IE9上传之前预览Div中的图像 [英] Preview an Image in Div before its uploaded using IE9

问题描述

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

How can I able to preview a image before it is uploaded. The preview action should be executed in all browsers without using Ajax to upload the image.

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

Most of the examples are using FileReader, which wont work in IE9.

是否有任何插件或任何替代品使其在IE9中运行

Is there any plugins or any alternative to make it working in 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：

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中效果很好。

I find this works well in emulation-IE9.

绘制图像的另一种方法：

Another way to draw a image:

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

Note: Add 2017/12/27

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

One solution to preview a local image with IE-9: IE-9 does`nt support FileReader, so I tried to upload it first then return the imageName(with server path) to View to change the 'src' attribute of the img. and it works well.

积分:(示例使用的是MVC）

Points:(the example is using MVC)

1。在input-type-file的'change'事件中，执行ajaxSubmit（action方法：void）

1.In the 'change' event of input-type-file, do the ajaxSubmit(the action method:void)

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

2.In the Controller,using [Newtonsoft.Json.JsonConvert.SerializeObject],to return the json-formatted string.

Response.Write（strData）;

Response.Write(strData);

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

3.In the callback of the ajaxSubmit, just change the src of the img. (dont forget convert the result to json)

这篇关于在使用IE9上传之前预览Div中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！