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,图片预览
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JS使用H5实现图片预览功能”评论...
更新动态
20240515
20240515
- dnf龙袍套装属性与天空套对比
- 横山菁儿-三国志-燃烧的长江-1993-APE整轨
- [ABC唱片]-《李传韵-琴魂》[K2-018][K2CD]WAV+CUE
- 【ABC唱片】《黃河號子SACD-011》-WAV分轨
- 当《生化危机2:重制版》加入路径追踪:画面真实感显著提升!
- 《哈迪斯2》BOSS不让暂停惹恼玩家:我手柄没电了!
- 《美末》S2艾莉造型首曝:头发留长 成熟了不少
- 邰正宵.2024-重燃爱恋.贰Walk.On【福茂】【FLAC分轨】
- 叶凡.2007-相思【中唱】【WAV+CUE】
- 王永.1997-十二道金牌【鸿心工作室】【WAV+CUE】
- dnf110换装在哪刷
- dnf110新版buff换装在哪里做
- dnf110满级了去哪里刷史诗
- 群星2024《龙年精逊纯银CD[WAV+CUE]
- 刘月宁《扬琴独奏-木兰辞变奏曲》[FLAC+CUE]