原生js实现图片单张上传及批量上传
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>pc图片上传</title>
<style>
.up{ display: inline-block; vertical-align: middle; border:1px solid #eaeaea;box-sizing: border-box; text-align: left; margin-right: 20px;
margin-bottom: 20px; width:240px; height: 240px; }
.tips{color: #999999;text-align: center;position: absolute;bottom:0;left: 96px;}
.Input{ position: relative; width: 240px; height: 240px; background: url(add.png)no-repeat center center; }//这里的图片背景源文件在下面。
.on{ position: relative; display: inline-block; text-align: left; margin-right: 20px; margin-bottom: 20px; width: 240px; height: 240px; display: none; position: relative; overflow: hidden; line-height: 200px; }
/*新增加的img*/
.on img{ width: 100%; height: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin:auto; }
.on div{position: absolute; height: 40px;width: 100%;bottom: 12px;z-index: 10;text-align: center;}
.on div p:nth-child(1){ float: left; width: 50%; line-height: 40px; font-size: 14px; cursor: pointer; color: #666666; background-color: #f4f4f4; }
.on div p:nth-child(2){ cursor: pointer; float: left; width: 50%; font-size: 14px; color: #666666; line-height: 40px; background-color: #f8f8f8; }
.up input{ width: 240px; height: 240px; opacity: 0; }
.button{ margin-top: 30px; }
/*批量上传*/
.button .set{ display: inline-block; width: 216px; height: 36px; background:url(btn_upload_off.png); background-size: 100% 100%; }
.set input{ width: 216px; height: 36px; opacity: 0; }
.submit{width: 100px; text-align: center; margin-top: 20px; border: 1px solid #333333; padding: 10px 0; border-radius: 4px;}
</style>
</head>
<body>
<section id="content">
<ul class="baohan">
<li class="up">
<div class="Input">
<input type="file" name="" class="fileinput">
<p class="tips">添加图片</p>
</div>
<div class="on">
<div>
<p>排序</p>
<p class="del">删除</p>
</div>
</div>
</li>
<li class="up">
更多请见：https://blog.csdn.net/weixin_44519496/article/details/120074464
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
