这是最受欢迎的 jQuery 文件上传组件，支持批量上传，拖放上传，显示上传进度条以及校验功能。
支持预览图片、音频和视频，支持跨域上传和客户端图片缩放，支持的服务端平台有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。
使用示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$(function () {
\'use strict\';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === \'blueimp.github.io\' ?
\'//jquery-file-upload.appspot.com/\' : \'server/php/\';
$(\'#fileupload\').fileupload({
url: url,
dataType: \'json\',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$(\'<p/>\').text(file.name).appendTo(\'#files\');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$(\'#progress .progress-bar\').css(
\'width\',
progress + \'%\'
);
}
}).prop(\'disabled\', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : \'disabled\');
}); |
DropzoneJS 是一个用于现代浏览器的开源的拖放上传插件，最大的特色是即时图片预览功能。
使用方法非常简单，只需添加 class 即可：
|
1
|
<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>
|
或者手动实例化：
|
1
|
new Dropzone("div#my-dropzone", { /* options */ });
|
可以添加更多参数：
|
1
|
Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 }; |
发可以自定义事件：
|
1
2
3
4
5
6
7
8
|
Dropzone.options.myDropzone({ init: function() {
this.on("error", function(file, message) { alert(message); });
}
});// or if you need to access a Dropzone somewhere else:var myDropzone = Dropzone.forElement("div#my-dropzone");
myDropzone.on("error", function(file, message) { alert(message); });
|
Uploadify 有两个版本，HTML5 方法上传版本和传统的 Flash 上传。支持高度自定义，可以完美的继承到你的网站中。
Flash 版本兼容性好，使用示例：
|
1
2
3
4
5
6
7
8
|
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : \'/uploadify/uploadify.swf\',
uploader : \'/uploadify/uploadify.php\',
width : 120
});
}); |
这个 JavaScript 插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合 jQuery 或者 Bootstrap 使用。
主要特色：
- 批量上传
- 显示进度条
- 拖放上传
- 自动或者手动上传，可取消
- 自定义错误提示信息
- 自动或者手动重试
- 内置的校验规则
- 可编辑文件名称
使用示例：
（1）手动触发上传
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
<i class="icon-upload icon-white"></i> Upload now
</div><script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.fineuploader-{VERSION}.js"></script>
<script> $(document).ready(function() {
var manualuploader = $(\'#manual-fine-uploader\').fineUploader({
request: {
endpoint: \'server/handleUploads\'
},
autoUpload: false,
text: {
uploadButton: \'<i class="icon-plus icon-white"></i> Select Files\'
}
});
$(\'#triggerUpload\').click(function() {
manualuploader.fineUploader(\'uploadStoredFiles\');
});
});
</script> |
（2）编辑文件名称
|
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
|
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Fine Uploader - jQuery Wrapper Minimal Demo</title>
<link href="fineuploader-{VERSION}.css" rel="stylesheet">
</head>
<body>
<div id="jquery-wrapped-fine-uploader"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
<i class="icon-upload icon-white"></i> Upload now
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.fineuploader-{VERSION}.js"></script>
<script>
$(document).ready(function () {
$(\'#myFineUploader\').fineUploader({
request: {
endpoint: \'server/handleUploads\'
},
editFilename: {
enabled: true
},
autoUpload: false
});
$(\'#triggerUpload\').click(function() {
$(\'#myFineuploader\').fineUploader(\'uploadStoredFiles\');
});
</script>
</body>
</html> |
（3）自定义选项
|
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
|
<div id="restricted-fine-uploader"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.fineuploader-{VERSION}.js"></script>
<script> $(document).ready(function() {
$(\'#restricted-fine-uploader\').fineUploader({
request: {
endpoint: \'server/success.html\'
},
multiple: false,
validation: {
allowedExtensions: [\'jpeg\', \'jpg\', \'txt\'],
sizeLimit: 51200 // 50 kB = 50 * 1024 bytes
},
text: {
uploadButton: \'Click or Drop\'
},
showMessage: function(message) {
// Using Bootstrap\'s classes
$(\'#restricted-fine-uploader\').append(\'<div class="alert alert-error">\' + message + \'</div>\');
}
});
});
</script> |
（4）显示图片缩略图
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div id="thumbnail-fine-uploader"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.fineuploader-{VERSION}.js"></script>
<script> $(document).ready(function() {
$(\'#thumbnail-fine-uploader\').fineUploader({
request: {
endpoint: \'server/success.html\'
},
validation: {
allowedExtensions: [\'jpeg\', \'jpg\', \'gif\', \'png\']
},
text: {
uploadButton: \'Click or Drop\'
}
}).on(\'complete\', function(event, id, fileName, responseJSON) {
if (responseJSON.success) {
$(this).append(\'<img src="img/success.jpg" alt="\' + fileName + \'">\');
}
});
});
</script> |
（5）限制文件上传数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div id="filelimit-fine-uploader"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.fineuploader-{VERSION}.js"></script>
<script> $(document).ready(function() {
$(\'#filelimit-fine-uploader\').fineUploader({
request: {
endpoint: \'server/success.html\'
},
validation: {
itemLimit: 3
}
});
});
</script> |