判断该浏览器是否支持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.