Question

如何在上传图像之前预览图像。应该在所有浏览器中执行预览操作，而不使用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]);
}

Answer 1

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方法：void）

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

回复于（strData是）;

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

Answer 2

这是更新后的代码。希望它适合你。

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

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

2 个答案: