How-to-use-plupload-to-upload-plug-ins

How to use plupload to upload plug-ins

Plupload is a file upload control of jQuery, providing a very convenient way to upload, it supports many types of file upload, before the file upload, compression, filtering, segmentation and other related convenient operation.

advantages of plupload

  • Upload in HTML5

  • Drag’n’Drop Files from Desktop

  • Access Raw File Data

  • Shrink Images on Client-Side

  • Upload in Chunks

  • ranslated to 30+ Languages

disadvantages of plupload

  • Once the plupload filter is used, the Google browser will become very slow

  • Sometimes it’s not convenient to grab files in an unusual way

look at the code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>plupload文件上传</title>
<link rel="stylesheet" type="text/css" href="css/jquery.plupload.queue.css">
</head>
<body>
<div id="app">
<div class="plupload"></div>
<div class="pluploadlist">
<ul></ul>
</div>
</div>
<script type="text/javascript" src="js/plupload.min.js"></script>
<script type="text/javascript" src="js/jquery.plupload.queue.min.js"></script>
<script type="text/javascript">
$(function () {
// body...
var uploader = new plupload.Uploader({
browse_button : 'plupload',
url : '/plupload',
runtimes: 'html5',
multi_selection: false,
max_file_size: '10mb',
file_data_name: 'file',
headers: {
's': 'web',
'sessionID': gtUtil.cookieUtil.getCookie('sessionID')
},
multipart_params: {
's': 'web',
'uid': gtUtil.cookieUtil.getCookie('userid'),
}
});
uploader.init();
uploader.bind('FilesAdded', function(up, file) {
up.disableBrowse(true)
up.start();
});
uploader.bind('BeforeUpload',function(up,file){
up.start();
});
uploader.bind('UploadProgress', function(up, file) {
var percent = file.percent;
console.log(percent)
});
uploader.bind('FileUploaded', function(up, file) {
var data = eval("(" + serverData.response + ")");
up.disableBrowse(false)
});
uploader.bind('Error',function(up, err){
console.log(err)
})
})
</script>
</body>
</html>

Some suggestions from plupload

  • If you are using acoustic filters, in addition to upload when the reaction is very slow, others are very good, is also very safe, if not the original filter can filter in the BeforeUpload method, but it is not safe.

  • In the process of uploading large files, there must be a waiting process. At this point, if you want to terminate or stop uploading, you must intercept in the UploadProgress method.

  • If the upload is terminated, use the following code

1
2
3
4
5
6
7
8
uploader.bind('UploadProgress', function (up, file) {
that.opts.targetDiv.find('.pluploadlist ul span.stop').click(function (e) {
up.stop();
up.removeFile(file);
uploader.disableBrowse(false);
$(this).parent().remove();
});
});
  • The default filter is not available. Refer to the following code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
uploader.bind('BeforeUpload',function(uploader,file){
var splice_ = file.name;
var splice_copy = splice_.lastIndexOf("\.");
var getname = splice_.substring(splice_copy + 1, splice_.length);
if(extensions.indexOf(getname) == "-1"){
dialog({timeout:3000,content:'<i class="ui-dialog-icon-error" style="vertical-align:-4px"></i>不支持所选文件类型,请重新选择',zIndex:100}).showModal();
uploader.stop();
uploader.removeFile(file);
uploader.refresh();
avatarUpload.disableBrowse(false);
that.opts.targetDiv.find('.myFileList #li_' + that.opts.id).remove();
}else{
uploader.disableBrowse(true);
}
});