您的位置：首页 > Web前端 > JQuery

Html+JQuery实现静态界面选择图片预览（未连接后台上传）

2020-03-25 07:46 1431 查看

本人才疏学浅，欢迎各位前辈前来指导。

以下为全部代码

<html>
<head>
<meta charset="utf-8">
<title>图片上传</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("input").change(function(){
var imgnum = $(this).attr("data");
$("."+imgnum).attr("src",URL.createObjectURL($(this)[0].files[0]));
});
});
</script>
<style type="text/css">
img{
width: 150px;
height: 150px;
background: white;
border: #e7e7e7 solid 2px;
margin-right: 30px;
border-radius: 10px;
}
.imgbox input{
width: 150px;
height: 150px;
position: fixed;
top: 20px;
opacity:0;
margin-right: 30px;
}
</style>
</head>
<body style="margin: 25px;">
<div class="imgbox">
<input type="file" data="img1">
<img src="FileUpload.jpg" class="img1">
<input type="file" data="img2">
<img src="FileUpload.jpg" class="img2">
<input type="file" data="img3">
<img src="FileUpload.jpg" class="img3">
</div>
</body>
</html>

运行展示
上传前

上传后

  • 点赞
  • 收藏
  • 分享
  • 文章举报
幼儿园精英 发布了8 篇原创文章 · 获赞 5 · 访问量 964 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航