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

$(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>