在使用IE9上傳圖片之前預覽圖片中的圖片

如何在上載圖片之前預覽圖片？預覽操作應在所有瀏覽器中執行，而不使用Ajax來上傳圖像。在使用IE9上傳圖片之前預覽圖片中的圖片

大部分例子都使用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]); 
}

來源

2016-04-03 Cork Kochi

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

我覺得這是行之有效的仿真，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 does`nt支持FileReader，所以我試圖先上傳它，然後將imageName（帶有服務器路徑）返回到View以更改img的'src'屬性。它運作良好。

點數：（該示例是使用MVC）

1.In輸入型文件的 '改變' 事件，執行ajaxSubmit會（操作方法：無效）

2.In的控制器使用[Newtonsoft.Json.JsonConvert.SerializeObject]返回json格式的字符串。

Response.Write（strData）;

3.在ajaxSubmit的回調中，只需更改img的src即可。（不要忘記將結果轉換爲json）

來源

2017-12-21 03:03:12 CoderMonkey

這裏是更新的代碼。希望對你有效。

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

來源

2017-12-21 04:42:15

在使用IE9上傳圖片之前預覽圖片中的圖片

回答

相關問題