文件上傳功能作爲網頁重要的組成部分，幾乎無處不在，從簡單的單個文件上傳到複雜的批量上傳、拖放上傳，需要開發者花費大量的時間和精力去處理，以期實現好用的上傳功能。這篇文章向大家推薦幾款很棒的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）手動觸發上傳
（2）編輯文件名稱
（3）自定義選項
（4）顯示圖片縮略圖
（5）限制文件上傳數
您可能感興趣的相關文章
轉載 http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-five.html