HTML中上传与读取图片或文件（input file）----在路上（25）

input file相关知识简例

在此介绍的input file相关知识为： 上传照片及文件，其中包括单次上传、批量上传、删除照片、增加照片、读取图片、对上传的图片或文件的判断，比如限制图片的张数、限制图片的格式、大小等。

在开发中，文件上传必不可少，<input type="file" /> 是常用的上传标签，但特别low、浏览的字样又不能换，但难不倒强迫症患者...看一些其他网站有的将<input type="file" />隐藏，用点击其他的标签（图片等）来时实现选择文件上传功能，也有的将其设为透明，这里推荐后者，详情请参考下面代码。

此为本人写的demo，更人性化的效果实现，供分享，不足之处望提议，将不胜感激

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
         .kuang{
             display: inline-block;
             vertical-align: middle;
             box-shadow: inset 0px 1px 20px 5px #ddd;
             text-align: left;
             margin-right: 20px;
             margin-bottom: 20px;
             width: 165px;
             height: 165px;
         }
         .addhao{
             width: 165px;
             height: 165px;
             background: url(../img/add_photo_plus.png);
         }
         .on{
             display: inline-block;
             text-align: left;
             margin-right: 20px;
             margin-bottom: 20px;
             width: 165px;
             height: 165px;
             display: none;
             position: relative;
             overflow: hidden;
             line-height: 200px;
         }
         .xian{
             width: 165px;
             height: 165px;
             position: absolute;
             background-image: linear-gradient(
                     0deg,
                     rgba(0,0,0,0.7) 50%,
                     transparent 50%
             );
             background-size: 165px 4px;
             display: none;
             z-index: 2;
         }
         .chahao{
             position: absolute;
             width: 60px;
             height: 60px;
             background: url(../img/ico_02.png);
             background-position: -171px -158px;
             top: 52.5px;
             left: 52.5px;
             display: none;
             z-index: 2;
         }
         .on img{
             width: 100%;
             height: auto;
             position: absolute;
             left: 0;
             right: 0;
             top: 0;
             bottom: 0;
             margin:auto;
         }
         .kuang input{
             width: 164px;
             height: 164px;
             opacity: 0;
         }
         .button{
             width: 500px;
             height: 36px;
             margin: 0 auto;

         }
         .button .set{
             float: left;
             width: 216px;
             height: 36px;
             background: #ddd;
             text-align: center;
             position: relative;
         }
         .set input{
             width: 216px;
             height: 36px;
             opacity: 0;
             position: absolute;
             top: 0;
             left: 0;
         }
         .button .next{
             float: right;
             width: 216px;
             height: 36px;
             background: red;
             color: white;
         }
         .bigk{
             width: 1000px;
             margin: 0 auto;
             text-align: center;
         }
     </style>
     <script src="branches/jquery-3.1.1.min.js"></script>
 </head>
 <body>
 <div class="bigk">
         <div class="kuang">
             <div class="addhao">
                 <input type="file" name="" class="fileinput">
             </div>
             <div class="on">
                 <div class="xian"></div>
                 <div class="chahao"></div>
             </div>
         </div>
         <div class="kuang">
             <div class="addhao">
                 <input type="file" name="" class="fileinput">
             </div>
             <div class="on">
                 <div class="xian"></div>
                 <div class="chahao"></div>
             </div>
         </div>
         <div class="kuang">
             <div class="addhao">
                 <input type="file" name="" class="fileinput">
             </div>
             <div class="on">
                 <div class="xian"></div>
                 <div class="chahao"></div>
             </div>
         </div>
         <h3>上传n张照片，生成属于你的相册</h3>
         <p><span style="color:red;">限制条件：可自行增减设置；</span>如：支持jpg/png/jpeg格式，单张照片不大于20M，单次上传不多于n张，请尽量上传横板照片</p>
         <img src="../img/line_03.png" alt="">
         <div class="button" >
             <a href=""><div class="set">批量上传<input type="file" name="" multiple="multiple" id="piliang"></div></a>
             <a href="#" class="next">限制张数</a>
         </div>
     </div>
 </div>
 </div>
 <script>
 // 单张上传照片  删除照片
 $(" .fileinput").change(function () {
      var file = this.files[0];
      readFile(file,$(this).parent().siblings(".on"));
 });
 $(".on").mouseover(function () {
      $(this).children(".xian").show();
      $(this).children(".chahao").show();

 });
 $(".on").mouseleave(function () {
      $(this).children(".xian").hide();
      $(this).children(".chahao").hide();
 });
 $(".chahao").click(function () {
      $(this).next().remove();
      $(".xian").hide();
      $(".chahao").hide();
      $(this).parent().hide();
      $(this).parent().siblings(".addhao").show();
      $(this).parent().siblings(".addhao").children().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(".addhao").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(".chahao").next().remove();
 readFile(file,on.eq(i));
 }
 });
 //
 var on = $(".on");
 $(".next").click(function () {
    for (var i = 0; i < 10; i++) {
    console.log(on[i].childNodes.length);
    if (on[i].childNodes.length==6){
 //这个判断就是说明里面有多少个孩子，孩子不够数，不会生成相册
       }else{
           alert("上传照片不足3张");
           $(".next").attr("href","javascript:void(0)");
            return
            }
      $(".next").attr("href","生成相册.html");
    }
 });
 </script>
 </body>
 </html>

初始效果图如下

点击+号进行添加图片效果图如下

 点击+号添加完成单次上传图片效果图如下

点击批量进行上传效果图如下：

删除上传照片效果图如下

当没有满足js中的设置要求，将不能提交

解析：

选择文件：input：file 选择本地文件，默认为单选，多选为multiple；

读取文件：需要阅读器 新建reader；

有关js这里用的是jq，在用此方法前，请将jq链接到页面；