坑点
- IE8不能获取到
input
d的files
对象 - IE8设置本地图片地址为src后,有的图显示,有的图不显示(未探索具体原因)
解决办法
支持files
对象的就用base64的方法(不要问我为什么要用base64,最先想到的就是base64)
不支持的就通过滤镜方式来实现
界面HTML代码
<input type="file" id="fileUpload">
<div id="img2" style="width:600px;height:300px">
</div>
<img id="img" src="" width="600" height="300"/>
相应js
$("#fileUpload").change(function (e) {
//支持360和chrome
if (this.files) {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file); //调用自带方法进行转换
reader.onload = function (e) {
$("#img").attr("src", this.result); //将转换后的编码存入src完成预览
};
} else {
//兼容IE8
document.getElementById("fileUpload_shopask").select(); //选中FileUpload控件中的文本
var path = document.selection.createRange().text;
document.getElementById("img2").innerHTML = "";
document.getElementById("img2").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='" + path + "')";
}
changeImg(this.files)
});
function changeImg(flag) {
//true表示支持files,显示img,不支持时显示img2
$("img").css("display", flag ? '' : 'none');
$("img2").css("display", flag ? 'none' : '');
}