文件上传&&验证文件格式

 $(function(){
      $(".layui-progress").hide();
     $("[data-upload-file]").each(function(){
         $(this).click(function(){
             var url = "" ;
             var file = $(this).data("upload-file");
             var progress = $(this).data("upload-progress");
             var progressFilter = $(this).data("upload-progress-filter");
             var target = $(this).data("upload-target");
             var id = $(this).data("file-id");
             console.log(id)
             var files = $(file)[0].files;//$(file)是一个数组，jquery选中所有的file,$(file)[0]表示从数组中选择第一个元素
               if(files.length == 0){
                   return layer.msg("请选择文件");
               }
              if(file.indexOf("covfile") != -1){
                     url = "/uploadResource/" + id;
                      var ext = /\.(?:bmp|cod|gif|ief|jpe|jpg|jfif|svg|tif|tiff|ras|cmx|ico|pnm|pbm|pgm|rgb|xbm|xpm|xwd|png)$/i;
                       if(!files[0].name.match(ext)){
                           return layer.msg("文件格式错误！");
                       }
                  }else{
                     url = "/uploadResource/" + id;
                      switch(id){
                          case 1:
                             var ext = /\.(?:au|snd|mid|rmi|mp3|aif|aifc|aiff|m3u|ra|ram|wav)$/i;
                              break;
                          case 2:
                              var ext = /\.(?:bmp|cod|gif|ief|jpe|jpg|jfif|svg|tif|tiff|ras|cmx|ico|pnm|pbm|pgm|rgb|xbm|xpm|xwd|png)$/i;
                              break;
                          case 3:
                              var ext = /\.(?:css|323|htm|html|stm|uls|pptx|mpp|wcm|wdb|wks|wps|js)$/i;
                              break;
                          case 4:
                              var ext = /\.(?:mp2|mpa|mpe|mpeg|mpv2|mov|qt|lst|lsx|asf|asr|asx|avi|mp4|movie)$/i;
                              break;

                      }
                     if(!files[0].name.match(ext)){
                                       return layer.msg("文件格式错误！");
                                   }    

                 }

             uploadFile(url, file, progress, progressFilter, function(evt){
                 if(evt.target.responseText==0){
                     layer.msg("上传文件时出错");
                 }else{
                     $(target).val(evt.target.responseText);
                     layer.msg("上传成功！");
                 }

             });
         });
     });
  })
    function uploadFile(url, file, progress, progressFilter, uploadComplete){
         $(progress).show();
         var fd = new FormData();
         fd.append("file", $(file)[0].files[0]);
         var xhr = new XMLHttpRequest();
         xhr.upload.addEventListener("progress", uploadProgress, false);
         xhr.addEventListener("load", uploadComplete, false);
         xhr.addEventListener("error", uploadFailed, false);
         xhr.addEventListener("abort", uploadCanceled, false);
         xhr.open("POST", url);
         xhr.send(fd);

         function uploadProgress(evt) {
             if (evt.lengthComputable) {
                 var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                 var percentCompleteS = percentComplete.toString();
                 if(percentCompleteS == "100"){
                     layui.element().progress(progressFilter, percentCompleteS + '%');
                     $(".layui-progress").fadeOut();
                     //layer.msg("上传成功！");
                 }else{
                     layui.element().progress(progressFilter, percentCompleteS + '%');
                 }

             }else{
                 $(progress).html(percentComplete.toString() + '无法计算上传进度');
             }
         }
         function uploadFailed(evt) {
             layer.msg("上传文件时出错");
         }
         function uploadCanceled(evt) {
             layer.msg("取消上传");
         }

     }
 function imgFormat(files){
      var ext = /\.(?:bmp|cod|gif|ief|jpe|jpg|jfif|svg|tif|tiff|ras|cmx|ico|pnm|pbm|pgm|rgb|xbm|xpm|xwd|png)$/i;
       if(!files[0].name.match(ext)){
           return layer.msg("文件格式错误！");
       }
 }
 //
 //function fileSelected() {
 //        var file =  $(document.body).find('input[name="fileToUpload"]').prop('files');
 //        if (file) {
 //          var fileSize = 0;
 //          if (file.size > 1024 * 1024)
 //            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
 //          else
 //            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
 //          $('.fileName').html('文件名称: ' + $(file).attr("name"));
 //          $('.fileSize').html('文件大小: ' + $(file).attr("size"));
 //          $('.fileType').html('文件类型: ' + $(file).attr("type"));
 //        }
 //      }
 //
 //      function uploadFile() {
 //        $(".layui-progress").show();
 //        var fd = new FormData();
 //        fd.append("file", $('input[name="fileToUpload"]').prop('files'));
 //        var xhr = new XMLHttpRequest();
 //        xhr.upload.addEventListener("progress", uploadProgress, false);
 //        xhr.addEventListener("load", uploadComplete, false);
 //        xhr.addEventListener("error", uploadFailed, false);
 //        xhr.addEventListener("abort", uploadCanceled, false);
 //        xhr.open("POST", "uploadResource");//修改成自己的接口
 //        xhr.send(fd);
 //      }
 //      function uploadProgress(evt) {
 //        if (evt.lengthComputable) {
 //          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
 //          $('.progressNumber').html(percentComplete.toString() + '%');
 //          $('.progressNumber').width(percentComplete.toString() + '%');
 //        }
 //        else {
 //          $('.progressNumber').html('无法计算上传进度');
 //        }
 //      }
 //      function uploadComplete(evt) {
 //        /* 服务器端返回响应时候触发event事件*/
 //        alert(evt.target.responseText);
 //
 //       /**
 //        $("#uploadnewfile").attr("name": ) ;
 //        $("#uploadnewfile").val = ;
 //        **/
 //      }
 //      function uploadFailed(evt) {
 //        alert("上传文件时出错");
 //      }
 //      function uploadCanceled(evt) {
 //        alert("取消上传");
 //      }
 //
      

 <div class="form-group">
      <label for="lastname" class="col-sm-3 control-label">音频资源文件：</label>
      <div class="col-sm-7">
       <!-- 进度条开始 -->
      <div class="clearfix">
           <label for="fileToUpload"></label>
           <input type="file" name="fileToUpload" class="fileToUpload reaudiofile"  style="float:left;"/>
           <input type="button" value="点击上传" data-upload-file=".reaudiofile" data-upload-progress=".reaudioprogress"
            data-upload-progress-filter="reaudio" data-file-id="1"  data-upload-target=".reaudiofile-target" class="layui-btn layui-btn-small" style="float:left;" />
      </div>
       <div class="layui-progress audioprogress"  lay-filter="reaudio" style="margin:20px 0 5px 0;"  >
             <div class="layui-progress-bar layui-bg-green progressNumber"></div>
        </div>
       <input type="hidden" name="audioFile" value="" class="audiofile-target"/>
                                     <!-- 进度条结束 -->
      </div>

 </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-3 control-label">封面路径：</label>
      <div class="col-sm-7">
           <div class="clearfix">
               <label for="fileToUpload"></label>
               <input type="file" name="fileToUpload" class="fileToUpload covfile2"  style="float:left;"/>
               <input type="button" value="点击上传" data-file-id="5"  data-upload-file=".covfile2" data-upload-progress=".covprogress"
                data-upload-progress-filter="cov" data-upload-target=".covfile-target" class="layui-btn layui-btn-small" style="float:left;" />
           </div>
         <div class="layui-progress covprogress"  lay-filter="cov" style="margin:20px 0 5px 0;"  >
              <div class="layui-progress-bar layui-bg-green progressNumber"  ></div>
        </div>
       <input type="hidden" name="bgFile" value="" class="covfile-target"/>
    </div>
  </div>