美文网首页
图片上传兼容到ie8

图片上传兼容到ie8

作者: 怪我呦 | 来源:发表于2017-05-19 14:51 被阅读0次

判断该浏览器是否支持windows.FileReader

HTML5的FileReader接口支持本地预览,FileReader接口主要是将文件读入内存,并提供相应的方法,来读取文件中的数据,当然就能显示本地图片不需上传了

//支持主浏览器chrome等

If(window.FileReader){

var file = input.files[0];

//console.log(file)

var size=file.size; //文件的大小

//如果要限定上传文件的类型,可以通过文件选择器获取文件对象并通过type属性来检查文件类型

1)if(!/image\/\w+/.test(file.type)){

alert("请确保文件为图像类型");

$(input).val("");//把input里面的内容清空

return false;

}

2)var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();

if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){

  alert("图片的格式必须为png或者jpg或者jpeg格式!");

$(input).val("");

return false;

}

//新建FileReader 对象把文件的路径给img的src

var reader = new FileReader();//新建一个FileReader

reader.readAsText(files);//读取文件

reader.onload = function(){ //读取完文件之后会回来这里

$(input)...find("img")[0].src = this.result;

}

//若不支持window.FileReader 即支持IE 7 8 9 10

}else if(typeof window.ActiveXObject != 'undefined'){

input.select();//input获得选中

//input.blur();//失去焦点,或者让其他的对象获得焦点element.focus();

var nfile = document.selection.createRange().text;

//ie8 要通过滤镜的方式获得图片 滤镜要给div不能直接给img 即IE8下,img标签的src是无效的只能通过滤镜来解决

$($(input).parents(".attachContainorDiv:first").find("img")[0]).remove();

$($(input).parents(".attachContainorDiv:first").find(".temImg")[0]).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+nfile+"')");

}

}

注意:input不能设置成display:none,不然IE8还是不认。做法是把input的设置成透明度设为0、或者设置z-index。

一般用在ie7/8,在file控件select后再通过selection对象获得文件本地路径。此时file控件不能隐藏,否则不能被select.

https://github.com/wenshunxin/gms

相关文章

网友评论

      本文标题:图片上传兼容到ie8

      本文链接:https://www.haomeiwen.com/subject/emyyxxtx.html