判斷該瀏覽器是否支持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.