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

墨蓝 2021-09-19 13:38 571阅读 0赞

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]

<!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">
                    <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">
                    <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>
                <div class="button">
                    <div class="set"><input type="file" name="" multiple="multiple" id="piliang"></div>
                </div>
                <div class="submit">提交</div>
            </ul>
        </section>
    </body>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
    <script>
    $(document).ready(function(){
    	$(".fileinput").change(function(){
    		var file=this.files[0];
    		readFile(file,$(this).parent().siblings(".on"));
    	});
    	$(".on").mouseover(function(){
    		$(this).children("div").show();
    	});
    	$(".on").mouseout(function(){
    		$(this).children("div").hide();
    	});
    	$(".del").click(function () {
              $(".on>div").hide();
              $(this).parent().parent().hide();
              $(this).parent().parent().siblings(".Input").show();
              $(this).parent().siblings("img").remove()
              $(".fileinput").val("");
    
    
        });
        var on =document.querySelector(".on");
    //    需要把阅读的文件传进来file element是把读取到的内容放入的容器
        function readFile(file,element) {
    //        新建阅读器
            var reader = new FileReader();
    //        根据文件类型选择阅读方式
            switch (file.type){
                case 'image/jpg':
                case 'image/png':
                case 'image/jpeg':
                case 'image/gif':
                    reader.readAsDataURL(file);
                    break;
            }
    //        当文件阅读结束后执行的方法
            reader.addEventListener('load',function () {
    //            如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签
                switch (file.type){
                    case 'image/jpg':
                    case 'image/png':
                    case 'image/jpeg':
                    case 'image/gif':
    
                        var img = document.createElement('img');
                        img.src = reader.result;
                        element.append(img);
                        element.siblings(".Input").hide();
                        element.show();
                        break;
                }
            });
        }
     // 批量上传
        var piliang = document.querySelector('#piliang');
        var on = $('.on');
        piliang.addEventListener('change',function () {
           for (var i = 0;i < this.files.length;i++){
               var file = this.files[i];
               on.eq(i).children(".cha").next().remove();
               readFile(file,on.eq(i));
           }
       
        });
    //  
    var on = $(".on");
    $(".submit").click(function () {
      for (var i = 0; i < 10; i++) {
        console.log(on[i].childNodes.length);
        if (on[i].childNodes.length==6){
         alert("上传成功");
         return 
        }else{
          alert("上传照片不足十张");
          $(".next").attr("href","javascript:void(0)");
          return;
        }
        
      }
    });
    
    });
    </script>
    </html>

**这是源文件背景：**  
![在这里插入图片描述][20190523090823361.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210812/01aa9abe2aea49258691a4a042966082.png
[20190523090823361.png]: /images/20210812/a05e40b91e3e4e1c9d111f2fe9a5932a.png