几款极好的 JavaScript 文件上传插件
文件上传功能作为网页重要的组成部分，几乎无处不在，从简单的单个文件上传到复杂的批量上传、拖放上传，需要开发者花费大量的时间和精力去处理，以期实现好用的上传功能。这篇文章向大家推荐几款很棒的 JavaScript 文件上传功能增强插件。
这是最受欢迎的 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); });<span style=
"line-height: 1.5"
> </span>
|
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
=
"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
=
"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
=
"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
=
"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
=
"jquery.fineuploader-{VERSION}.js"
></
script
>
<
script
>
$(document).ready(function() {
$('#filelimit-fine-uploader').fineUploader({
request: {
endpoint: 'server/success.html'
},
validation: {
itemLimit: 3
}
});
});
</
script
>
|