js小学生图区_多种方式实现js图片预览

js多种方式图片预览-持续更新

//设置自己的变量存储区

var Util = {

file : $("#file"),

image_show:$("#img_show")

}

Util.file.οnchange=function(f){

if(this.files[0].type.indexOf('image')<0){

alert("请选择图片文件!");

return;

}

if(this.files[0].size/1024 > 5*1024){

alert("图片过大，请选择5M以下的文件");

return;

}

if(typeof FileReader=='undefined'){//如果支持,typeOf返回的也是 Function

alert("您的浏览器不支持html5 fileReader请更换浏览器重试!");

return;

}

var reader = new FileReader();

reader.readAsDataURL(this.files[0]);//这里传的是一个blob ，其实file对象就是继承自bolob

reader.οnlοad=function(e){

console.log(reader.result);//这里拿到的是一个base64编码后的图片

Util.image_show.src=reader.result;

}

};