JS使用H5实现图片预览功能
2019-09-30 14:02
2286 查看
JS使用H5实现上传图片预览的功能,以下是代码的实现:
<!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.οnlοad=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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- JS使用H5实现图片预览
- JS通过使用PDFJS实现基于文件流的预览功能
- 如何通过js实现图片预览功能【附实例代码】
- [前端 4] 使用Js实现图片上传预览
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- [前端 4] 使用Js实现图片上传预览
- 简单实现JS上传图片预览功能
- vue.js 图片上传并预览及图片更换功能的实现代码
- JavaScript进阶(八)JS实现图片预览并导入服务器功能
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
- JS实现上传图片实时预览功能
- js 实现图片预览功能支持ie8
- 实现JS上传图片预览功能
- js图片上传预览功能兼容实现
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
- 模仿微信朋友圈 仿微信js-sdk wx.previewImage javascript实现,支持图片预览,滑动切换,双指缩放,图片缓存 h5 html5 js
- 使用ajax,结合jquery,php实现图片上传预览功能
- JS实现上传图片预览功能
- 使用jquery.jqprint.js 实现的打印功能,IE9不能进行打印预览、火狐打印空白界面
- 用js来读取本地文件---实现图片预览功能