天天看點

html上傳預覽圖檔原理,js+html 實作圖檔上傳預覽

上傳照片

#tabkePhoto{display:none;}

.photo{}

.imgBox{width:200px;height:200px;}

點選上傳

$(function(){

$(‘#tabkePhoto‘).change(function(e){

var _suffix = $(this).val().substr(Number($(this).val().indexOf(‘.‘))+1).toUpperCase();

if(this.files && this.files[0]){

var _file = this.files[0],

imgUrl = new FileReader();

imgUrl.readAsDataURL(_file);

imgUrl.onload = function(){

if(!(_suffix ==‘JPG‘ || _suffix == ‘PNG‘|| _suffix == ‘JPEG‘|| _suffix==‘TIFF‘|| _suffix==‘BMP‘)){

alert(‘騷年,格式好像不對吧!你換張試試‘);

}else{

var _html = ‘

html上傳預覽圖檔原理,js+html 實作圖檔上傳預覽

‘;

$(‘.imgBox‘).html(_html);

}

}

}else{

$(this).select();

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

if(!(_suffix ==‘JPG‘ || _suffix == ‘PNG‘|| _suffix == ‘JPEG‘|| _suffix==‘TIFF‘|| _suffix==‘BMP‘)){

alert(‘騷年,格式好像不對吧!你換張試試‘);

}else{

var _html = ‘

html上傳預覽圖檔原理,js+html 實作圖檔上傳預覽

‘;

$(‘.imgBox‘).html(_html);

}

}

})

})

原文:http://www.cnblogs.com/xlxlyl/p/5794956.html