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 = ‘‘;

$(‘.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 = ‘‘;

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

}

}

})

})

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