JS使用H5实现图片预览功能

JS使用H5实现上传图片预览的功能，以下是代码的实现：

创新互联建站凭借专业的设计团队扎实的技术支持、优质高效的服务意识和丰厚的资源优势，提供专业的网站策划、做网站、成都网站制作、网站优化、软件开发、网站改版等服务，在成都10多年的网站建设设计经验，为成都千余家中小型企业策划设计了网站。

<!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实现图片预览功能
URL地址：https://www.cdcxhl.com/article42/godhec.html

成都网站建设公司_创新互联，为您提供动态网站、建站公司、企业网站制作、ChatGPT、电子商务、域名注册

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容