jQuery File Uploaderjavascript
這是最受歡迎的 jQuery 文件上傳組件，支持批量上傳，拖放上傳，顯示上傳進度條以及校驗功能。php
支持預覽圖片、音頻和視頻，支持跨域上傳和客戶端圖片縮放，支持的服務端平臺有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。css
使用示例：html
|
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'
);
});
|
DropZoneJSjquery
DropzoneJS 是一個用於現代瀏覽器的開源的拖放上傳插件，最大的特點是即時圖片預覽功能。git
使用方法很是簡單，只需添加 class 便可：github
|
1
|
<form id=
"my-awesome-dropzone"
action=
"/target"
class
=
"dropzone"
></form>
|
或者手動實例化：web
|
1
|
new
Dropzone(
"div#my-dropzone"
, {
/* options */
});
|
能夠添加更多參數：json
|
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>
|