首页 > 其他分享> > 原生js实现图片单张上传及批量上传

原生js实现图片单张上传及批量上传

2021-09-07 10:06:56 作者：互联网

效果图：
在这里插入图片描述

<!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">

标签：margin,align,240px,height,width,position,js,上传,单张
来源： https://blog.csdn.net/weixin_44519496/article/details/120074464