先贴代码，之后完善：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>js多种方式图片预览-持续更新</title> </head> <body> <body> <input type="file" id="file" value="选择" accept="image/*"> <div style="width:300px;height:300px;border:1px solid #ccc"> <img id="img_show" src="" /> </div> </body> <script type="text/javascript" src="./jquery-3.1.1.min.js"></script> <script type="text/javascript"> //设置自己的变量存储区 var Util = { 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(typeof FileReader=='undefined'){//如果支持,typeOf返回的也是 Function alert("您的浏览器不支持html5 fileReader请更换浏览器重试!"); return; } var reader = new FileReader(); 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- JS+HTML5实现上传图片预览效果完整实例【测试可用】
- javascript实现的图片预览功能
- javascript图片预览和上传（兼容IE）
- 基于JavaScript实现本地图片预览
- JS实现的图片预览插件与用法示例【不上传图片】
- 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
- JS验证图片格式和大小并预览的简单实例
- js实现上传图片预览的方法
- JS预览图像将本地图片显示到浏览器上
- js实现上传图片之上传前预览图片
- Javascript图片上传前的本地预览实例
- JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
