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

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