h5 拖拽上传，仿bootstarp fileinput样式

1. 背景：
   项目中需求上传文件，因为之前用过bootstarp的Fileinput，所以选择了这个插件，可是在预览excal，的时候发现了问题，别的文件都正常预览，到了excal结果乱码。各种百度没有解决问题，想了半天决定自己写一个上传插件（项目功能比较简单，只接受excal）顺便练练手

2. h5 API
   这里碰到了一个坑：

   $("#fileLabel").on("dragenter",function(e){
             e.preventDefault();
             $(this).addClass("active");
         })
         $("#fileLabel").on("dragleave",function(e){
             e.preventDefault();
             $(this).removeClass("active");
         })
         $("#fileLabel").on("drop",function(e){
             e.preventDefault();
             console.log(e.dataTransfer.files)
             that.disposeFile(e.dataTransfer.files)
             $(this).removeClass("active");
         })

   绑定过事件之后，每次拖拽上去，如果是text之类的直接打开了文件，如果是excal之类的就直接下载。看了api就是找不到问题，各种百度发现了原因，没有写dragover事件，添加上over事件后解决了问题。

3. 代码:

   class setFileUpload{
     constructor(DOM){
         this.DOM = DOM;
         //文件上传状态
         this.fileStatus = false;
         //文件格式是否正确
         this.fileTypeStatus = false;
         this.option = {
             'fileType':['xls','xlsx']
         }
         this.file = null;
         this.init();
     }
     init(){
         //拼装页面
         this.joinPage();
         //绑定事件
         this.bindEvent();
     }
     joinPage(){
       let _html = `
       <div class="box">
        <label id="fileLabel" for="files">
         <div class="label_content">
          <div class="file-drop-zone-title text-center">拖拽文件到这里 …<br>支持多文件同时上传<br>(或点击个文件按钮选择文件)</div>
         </div>
         <div class="label_file text-center hide">
          <div class="file_icon ">
           <span class="file-other-icon">
            <i class="glyphicon glyphicon-file"></i>
           </span>
          </div>
          <div class="file_name"></div>
          <div class="file_size"></div>
         </div>
        </label>
        <p class="bg-danger alertInfo hide"></p>
        <input type="file" id="files" name="files[]" multiple />
       </div>
       `;
         this.DOM.append(_html);
     }
     isStatusChange(){
         //判断文件上传状态
         if(!this.fileStatus){
             $('.label_content').removeClass('hide');
             $('.label_file').addClass('hide');
         }else{
             //如果已上传文件
             $('.label_content').addClass('hide');
             $('.label_file').removeClass('hide');
             //验证文件格式
             this.fileTypeVerifi($('.file_name').text())
         }
     }
     fileTypeVerifi(fileName){
         //验证文件类型  info文件名称
         let that = this,
             isOk = true,
             Rex = '';
         $.each(that.option['fileType'],(i,v) => {
             if(i == 0){
                 Rex += v;
             }else{
                 Rex += "|"+v;
             }
         })
         var reg = new RegExp(`\\.(${Rex})$`);
         if(!reg.test(fileName)){
             isOk = false;
         }
         this.fileTypeStatus = isOk;
         //验证结果通过提示消息展示
         that.showInfo(true,isOk);
         return isOk;
     }
     showInfo(showType,Filetype){
         //提示消息的显示隐藏
        if(showType){
            $('.alertInfo').removeClass('hide');
            if(Filetype){
                $('.alertInfo').removeClass('bg-danger').addClass('bg-success');
                $('.alertInfo').text(`上传文件(${$('.file_name').text()})成功！`)
            }else{
                $('.alertInfo').removeClass('bg-success').addClass('bg-danger');
                $('.alertInfo').text(`上传文件(${$('.file_name').text()})类型错误，支持格式：${this.option['fileType']}`)
            }
        }else{
            $('.alertInfo').addClass('hide');
        }
     }
     getImg(){
         return {
             status : this.fileTypeStatus,
             file : this.file
         }
     }
     bindEvent(){
         //绑定事件
         let that = this;
         $("#fileLabel").on("dragover",function(e){
             e.preventDefault();
             $(this).addClass("active");
         })
         $("#fileLabel").on("dragleave",function(e){
             e.preventDefault();
             $(this).removeClass("active");
         })
         $("#fileLabel").on("drop",function(e){
             e.preventDefault();
             console.log(e.dataTransfer.files)
             that.disposeFile(e.dataTransfer.files)
             $(this).removeClass("active");
         })
         $("#files").change(function(evt){
             that.disposeFile(evt.target.files)
         });
     }
     disposeFile(files){
         let that = this;
         //处理文件
         if(files.length>0){
             $(".file_name").text(files[0]['name']);
             $(".file_size").text("("+(files[0]['size']*1/1024).toFixed(2)+"KB)");
             that.fileStatus = true;
             //验证文件类型
             that.fileTypeVerifi(files[0]['name']);
             that.file = files;
         }
         that.isStatusChange();
     }
   
   }

4. 源代码：
   代码已上传github：传送门