1 $(function(){
2 $(".layui-progress").hide();
3 $("[data-upload-file]").each(function(){
4 $(this).click(function(){
5 var url = "" ;
6 var file = $(this).data("upload-file");
7 var progress = $(this).data("upload-progress");
8 var progressFilter = $(this).data("upload-progress-filter");
9 var target = $(this).data("upload-target");
10 var id = $(this).data("file-id");
11 console.log(id)
12 var files = $(file)[0].files;//$(file)是一个数组，jquery选中所有的file,$(file)[0]表示从数组中选择第一个元素
13 if(files.length == 0){
14 return layer.msg("请选择文件");
15 }
16 if(file.indexOf("covfile") != -1){
17 url = "/uploadResource/" + id;
18 var ext = /\.(?:bmp|cod|gif|ief|jpe|jpg|jfif|svg|tif|tiff|ras|cmx|ico|pnm|pbm|pgm|rgb|xbm|xpm|xwd|png)$/i;
19 if(!files[0].name.match(ext)){
20 return layer.msg("文件格式错误！");
21 }
22 }else{
23 url = "/uploadResource/" + id;
24 switch(id){
25 case 1:
26 var ext = /\.(?:au|snd|mid|rmi|mp3|aif|aifc|aiff|m3u|ra|ram|wav)$/i;
27 break;
28 case 2:
29 var ext = /\.(?:bmp|cod|gif|ief|jpe|jpg|jfif|svg|tif|tiff|ras|cmx|ico|pnm|pbm|pgm|rgb|xbm|xpm|xwd|png)$/i;
30 break;
31 case 3:
32 var ext = /\.(?:css|323|htm|html|stm|uls|pptx|mpp|wcm|wdb|wks|wps|js)$/i;
33 break;
34 case 4:
35 var ext = /\.(?:mp2|mpa|mpe|mpeg|mpv2|mov|qt|lst|lsx|asf|asr|asx|avi|mp4|movie)$/i;
36 break;
37
38 }
39 if(!files[0].name.match(ext)){
40 return layer.msg("文件格式错误！");
41 }
42
43 }
44
45 uploadFile(url, file, progress, progressFilter, function(evt){
46 if(evt.target.responseText==0){
47 layer.msg("上传文件时出错");
48 }else{
49 $(target).val(evt.target.responseText);
50 layer.msg("上传成功！");
51 }
52
53 });
54 });
55 });
56 })
57 function uploadFile(url, file, progress, progressFilter, uploadComplete){
58 $(progress).show();
59 var fd = new FormData();
60 fd.append("file", $(file)[0].files[0]);
61 var xhr = new XMLHttpRequest();
62 xhr.upload.addEventListener("progress", uploadProgress, false);
63 xhr.addEventListener("load", uploadComplete, false);
64 xhr.addEventListener("error", uploadFailed, false);
65 xhr.addEventListener("abort", uploadCanceled, false);
66 xhr.open("POST", url);
67 xhr.send(fd);
68
69 function uploadProgress(evt) {
70 if (evt.lengthComputable) {
71 var percentComplete = Math.round(evt.loaded * 100 / evt.total);
72 var percentCompleteS = percentComplete.toString();
73 if(percentCompleteS == "100"){
74 layui.element().progress(progressFilter, percentCompleteS + '%');
75 $(".layui-progress").fadeOut();
76 //layer.msg("上传成功！");
77 }else{
78 layui.element().progress(progressFilter, percentCompleteS + '%');
79 }
80
81 }else{
82 $(progress).html(percentComplete.toString() + '无法计算上传进度');
83 }
84 }
85 function uploadFailed(evt) {
86 layer.msg("上传文件时出错");
87 }
88 function uploadCanceled(evt) {
89 layer.msg("取消上传");
90 }
91
92 }
93 function imgFormat(files){
94 var ext = /\.(?:bmp|cod|gif|ief|jpe|jpg|jfif|svg|tif|tiff|ras|cmx|ico|pnm|pbm|pgm|rgb|xbm|xpm|xwd|png)$/i;
95 if(!files[0].name.match(ext)){
96 return layer.msg("文件格式错误！");
97 }
98 }
99 //
100 //function fileSelected() {
101 // var file = $(document.body).find('input[name="fileToUpload"]').prop('files');
102 // if (file) {
103 // var fileSize = 0;
104 // if (file.size > 1024 * 1024)
105 // fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
106 // else
107 // fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
108 // $('.fileName').html('文件名称: ' + $(file).attr("name"));
109 // $('.fileSize').html('文件大小: ' + $(file).attr("size"));
110 // $('.fileType').html('文件类型: ' + $(file).attr("type"));
111 // }
112 // }
113 //
114 // function uploadFile() {
115 // $(".layui-progress").show();
116 // var fd = new FormData();
117 // fd.append("file", $('input[name="fileToUpload"]').prop('files'));
118 // var xhr = new XMLHttpRequest();
119 // xhr.upload.addEventListener("progress", uploadProgress, false);
120 // xhr.addEventListener("load", uploadComplete, false);
121 // xhr.addEventListener("error", uploadFailed, false);
122 // xhr.addEventListener("abort", uploadCanceled, false);
123 // xhr.open("POST", "uploadResource");//修改成自己的接口
124 // xhr.send(fd);
125 // }
126 // function uploadProgress(evt) {
127 // if (evt.lengthComputable) {
128 // var percentComplete = Math.round(evt.loaded * 100 / evt.total);
129 // $('.progressNumber').html(percentComplete.toString() + '%');
130 // $('.progressNumber').width(percentComplete.toString() + '%');
131 // }
132 // else {
133 // $('.progressNumber').html('无法计算上传进度');
134 // }
135 // }
136 // function uploadComplete(evt) {
137 // /* 服务器端返回响应时候触发event事件*/
138 // alert(evt.target.responseText);
139 //
140 // /**
141 // $("#uploadnewfile").attr("name": ) ;
142 // $("#uploadnewfile").val = ;
143 // **/
144 // }
145 // function uploadFailed(evt) {
146 // alert("上传文件时出错");
147 // }
148 // function uploadCanceled(evt) {
149 // alert("取消上传");
150 // }
151 //
152
1 <div class="form-group">
2 <label for="lastname" class="col-sm-3 control-label">音频资源文件：</label>
3 <div class="col-sm-7">
4 <!-- 进度条开始 -->
5 <div class="clearfix">
6 <label for="fileToUpload"></label>
7 <input type="file" name="fileToUpload" class="fileToUpload reaudiofile" style="float:left;"/>
8 <input type="button" value="点击上传" data-upload-file=".reaudiofile" data-upload-progress=".reaudioprogress"
9 data-upload-progress-filter="reaudio" data-file-id="1" data-upload-target=".reaudiofile-target" class="layui-btn layui-btn-small" style="float:left;" />
10 </div>
11 <div class="layui-progress audioprogress" lay-filter="reaudio" style="margin:20px 0 5px 0;" >
12 <div class="layui-progress-bar layui-bg-green progressNumber"></div>
13 </div>
14 <input type="hidden" name="audioFile" value="" class="audiofile-target"/>
15 <!-- 进度条结束 -->
16 </div>
17
18 </div>
19 <div class="form-group">
20 <label for="lastname" class="col-sm-3 control-label">封面路径：</label>
21 <div class="col-sm-7">
22 <div class="clearfix">
23 <label for="fileToUpload"></label>
24 <input type="file" name="fileToUpload" class="fileToUpload covfile2" style="float:left;"/>
25 <input type="button" value="点击上传" data-file-id="5" data-upload-file=".covfile2" data-upload-progress=".covprogress"
26 data-upload-progress-filter="cov" data-upload-target=".covfile-target" class="layui-btn layui-btn-small" style="float:left;" />
27 </div>
28 <div class="layui-progress covprogress" lay-filter="cov" style="margin:20px 0 5px 0;" >
29 <div class="layui-progress-bar layui-bg-green progressNumber" ></div>
30 </div>
31 <input type="hidden" name="bgFile" value="" class="covfile-target"/>
32 </div>
33 </div>
