JS使用H5实现图片预览
2017-07-18 15:59
567 查看
上传图片实现预览的功能,以下是代码的实现:
挺好用的,记录一下!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传预览</title> <script type="text/javascript"> //预览图片,参数说明:第一个参数:要预览的file对象,第二个参数:预览的img标签的id名称 function yl(obj,id) { //FileReader if(window.FileReader){//验证当前的浏览器是否支持图片预览 var reader=new FileReader(); var file=obj.files[0]; var regexImage=/^image\//;//js正则表达式,匹配是否拥有image if(regexImage.test(file.type)){ //设置读取结束的回调函数 reader.onload=function(data){ var img=document.getElementById(id); img.src=data.target.result;//将结果数据显示到img标签上 }; //开始读取上传的文件内容 reader.readAsDataURL(file); }else{ alert("亲,看清楚是图片预览"); return; } }else{ alert("亲,浏览器该升级了"); return; } } </script> </head> <body> <form action="fileup" method="post" enctype="multipart/form-data"> <input type="file" name="f1" onchange="yl(this,'ylimg')"/> <img alt="图片预览" id="ylimg" width="400px" height="400px"/> <input type="submit" value="上传图片"/> </form> </body> </html>
挺好用的,记录一下!
相关文章推荐
- html 使用js+css+html实现图片划过预览效果
- 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器
- 模仿微信朋友圈 仿微信js-sdk wx.previewImage javascript实现,支持图片预览,滑动切换,双指缩放,图片缓存 h5 html5 js
- 使用js和jquery实现点击图片上传及预览
- [前端 4] 使用Js实现图片上传预览
- [前端 4] 使用Js实现图片上传预览
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- asp.net+js实现上传图片即时预览
- JS实现图片上传前预览
- 用js实现上传图片前的预览
- JS实现图片上传本地预览
- 使用onpropertychange属性实现FILEUPLOAD的图片预览功能!
- 用JS脚本实现本地和远程图片或声音文件预览
- 使用Qt实现简单的图片预览效果
- JS实现图片待上传预览
- asp.net+js实现上传图片即时预览
- 一个图片轮换显示的实现,使用DIV+JS,支持Firefox,IE,Safiri
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- 使用JS实现图片无限循环左右滚动
- 一个图片轮换显示的实现,使用DIV+JS,支持Firefox,IE,Safiri