多种方式实现js图片预览
先贴代码,之后完善:
<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="Generator"content="EditPlus®"> <metaname="Author"content=""> <metaname="Keywords"content=""> <metaname="Description"content=""> <title>js多种方式图片预览-持续更新</title> </head> <body> <body> <inputtype="file"id="file"value="选择"accept="image/*"> <divstyle="width:300px;height:300px;border:1pxsolid#ccc"> <imgid="img_show"src=""/> </div> </body> <scripttype="text/javascript"src="./jquery-3.1.1.min.js"></script> <scripttype="text/javascript"> //设置自己的变量存储区 varUtil={ file:$("#file"), image_show:$("#img_show") } Util.file.onchange=function(f){ if(this.files[0].type.indexOf('image')<0){ alert("请选择图片文件!"); return; } if(this.files[0].size/1024>5*1024){ alert("图片过大,请选择5M以下的文件"); return; } if(typeofFileReader=='undefined'){//如果支持,typeOf返回的也是Function alert("您的浏览器不支持html5fileReader请更换浏览器重试!"); return; } varreader=newFileReader(); reader.readAsDataURL(this.files[0]);//这里传的是一个blob,其实file对象就是继承自bolob reader.onload=function(e){ console.log(reader.result);//这里拿到的是一个base64编码后的图片 Util.image_show.src=reader.result; } }; </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。