FileUpload

Posted 2020-11-09 luis-gong

需要导入的js文件，顺序不可变

• jquery.ui.widget.js
• jquery.iframe-transport.js
• jquery.fileupload.js
• jquery.fileupload-process.js
• jquery.fileupload-validate.js
• jquery.fileupload-ui.css
• jquery.fileupload.cs

插件下载地址

1 https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

所有可触发绑定事件

 1 $("#fileupload").fileupload({
 2         acceptFileTypes : /jp?g/i,
 3         maxFileSize : 3 * 1000 * 1000 * 1000
 4     }).bind(‘fileuploadadd‘, function(e, data) {
 5         console.log(‘fileuploadadd‘);
 6     }).bind(‘fileuploadsubmit‘, function(e, data) {
 7         console.log(‘fileuploadsubmit‘);
 8     }).bind(‘fileuploadsend‘, function(e, data) {
 9         console.log(‘fileuploadsend‘);
10     }).bind(‘fileuploaddone‘, function(e, data) {
11         console.log(‘fileuploaddone‘);
12     }).bind(‘fileuploadfail‘, function(e, data) {
13         console.log(‘fileuploadfail‘);
14     }).bind(‘fileuploadalways‘, function(e, data) {
15         console.log(‘fileuploadalways‘);
16     }).bind(‘fileuploadprogress‘, function(e, data) {
17         console.log(‘fileuploadprogress‘);
18     }).bind(‘fileuploadprogressall‘, function(e, data) {
19         console.log(‘fileuploadprogressall‘);
20     }).bind(‘fileuploadstart‘, function(e) {
21         console.log(‘fileuploadstart‘);
22     }).bind(‘fileuploadstop‘, function(e) {
23         console.log(‘fileuploadstop‘);
24     }).bind(‘fileuploadchange‘, function(e, data) {
25         console.log(‘fileuploadchange‘);
26     }).bind(‘fileuploadpaste‘, function(e, data) {
27         console.log(‘fileuploadpaste‘);
28     }).bind(‘fileuploaddrop‘, function(e, data) {
29         console.log(‘fileuploaddrop‘);
30     }).bind(‘fileuploaddragover‘, function(e) {
31         console.log(‘fileuploaddragover‘);
32     }).bind(‘fileuploadchunksend‘, function(e, data) {
33         console.log(‘fileuploadchunksend‘);
34     }).bind(‘fileuploadchunkdone‘, function(e, data) {
35         console.log(‘fileuploadchunkdone‘);
36     }).bind(‘fileuploadchunkfail‘, function(e, data) {
37         console.log(‘fileuploadchunkfail‘);
38     }).bind(‘fileuploadchunkalways‘, function(e, data) {
39         console.log(‘fileuploadchunkalways‘);
40     }).bind(‘fileuploadprocessstart‘, function(e) {
41         console.log(‘fileuploadprocessstart‘);
42     }).bind(‘fileuploadprocess‘, function(e, data) {
43         console.log(‘fileuploadprocess‘);
44     }).bind(‘fileuploadprocessdone‘, function(e, data) {
45         console.log(‘fileuploadprocessdone‘);
46     }).bind(‘fileuploadprocessfail‘, function(e, data) {
47         console.log(‘fileuploadprocessfail‘);
48     }).bind(‘fileuploadprocessalways‘, function(e, data) {
49         console.log(‘fileuploadprocessalways‘);
50     }).bind(‘fileuploadprocessstop‘, function(e) {
51         console.log(‘fileuploadprocessstop‘);
52     }).bind(‘fileuploaddestroy‘, function(e, data) {
53         console.log(‘fileuploaddestroy‘);
54     }).bind(‘fileuploaddestroyed‘, function(e, data) {
55         console.log(‘fileuploaddestroyed‘);
56     }).bind(‘fileuploadadded‘, function(e, data) {
57         console.log(‘fileuploadadded‘);
58     }).bind(‘fileuploadsent‘, function(e, data) {
59         console.log(‘fileuploadsent‘);
60     }).bind(‘fileuploadcompleted‘, function(e, data) {
61         console.log(‘fileuploadcompleted‘);
62     }).bind(‘fileuploadfailed‘, function(e, data) {
63         console.log(‘fileuploadfailed‘);
64     }).bind(‘fileuploadfinished‘, function(e, data) {
65         console.log(‘fileuploadfinished‘);
66     }).bind(‘fileuploadstarted‘, function(e) {
67         console.log(‘fileuploadstarted‘);
68     }).bind(‘fileuploadstopped‘, function(e) {
69         console.log(‘fileuploadstopped‘);
70     });

前端示例代码：

 1 span class="btn btn-success fileinput-button">
 2     <i class="glyphicon glyphicon-plus"></i>
 3     <span>上传文件</span>
 4     <input id="fileupload" type="file" name="file" multiple="">
 5 </span>
 6 <div class="bar" style="width: 0%;"></div>
 7 <label id="msg"></label>
 8 <script>
 9     $(‘#fileupload‘).fileupload({
10         dataType: "json",
11         autoUpload: true,
12         url: "/Home/UploadFile",
13         acceptFileTypes: /(\.|\/)(xls|xlsx)$/i,
14         maxNumberOfFiles: 1,//最大上传文件数目
15         maxFileSize: 5000000,//文件不超过5M
16         sequentialUploads: true,//是否队列上传
17     }).bind(‘fileuploadadd‘, function (e, data) {/* 点击上传按钮触发 */ })
18         .bind(‘fileuploadsubmit‘, function (e, data) {/* 如果不是自动上传需要点击提交上传 */ })
19         .bind(‘fileuploadprocessalways‘, function (e, data) {
20             if (data.files.error) {
21                 if (data.files[0].error == ‘File type not allowed‘) {
22                     $(‘#msg‘).text("文件类型错误");
23                 }
24                 if (data.files[0].error == ‘File is too large‘) {
25                     $(‘#msg‘).text("文件不能大于2M");
26                 }
27                if (data.files[0].error == ‘File is too small‘) {
28                     $(‘#msg‘).text("文件不能小于1M");
29                 }
30             }
31         }).
32         bind(‘fileuploaddone‘, function (e, data) {
33             $(‘#msg‘).text(‘上传成功‘);
34         })
35         .bind(‘fileuploadprogressall‘, function (e, data) {
36             var progress = parseInt(data.loaded / data.total * 100);
37             $(‘.bar‘).css(‘width‘, progress + ‘%‘);
38         })
39         .bind(‘fileuploadfail‘, function (e, data) {
40             if (data.errorThrown == ‘abort‘) {
41                 $(‘#msg‘).text(‘上传取消‘);
42             } else {
43                 $(‘#msg‘).text(‘上传失败，请稍后重试！‘);
44             }
45         });
46 </script>              

后台代码：

Request.Files["file"]