文件上傳功能作為網頁重要的組成部分，幾乎無處不在，從簡單的單個文件上傳到復雜的批量上傳、拖放上傳，需要開發者花費大量的時間和精力去處理，以期實現好用的上傳功能。這篇文章向大家推薦幾款很棒的 JavaScript 文件上傳功能增強插件。
您可能感興趣的相關文章
這是最受歡迎的 jQuery 文件上傳組件，支持批量上傳，拖放上傳，顯示上傳進度條以及校驗功能。
支持預覽圖片、音頻和視頻，支持跨域上傳和客戶端圖片縮放，支持的服務端平台有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。
使用示例：
$(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 即可：
<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>
或者手動實例化：
new Dropzone("div#my-dropzone", { /* options */ });
可以添加更多參數：
Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };
發可以自定義事件：
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 版本兼容性好，使用示例：
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
這個 JavaScript 插件可以幫助你在網站中集成體驗極好的文件上傳功能。可以結合 jQuery 或者 Bootstrap 使用。
主要特色：
- 批量上傳
- 顯示進度條
- 拖放上傳
- 自動或者手動上傳，可取消
- 自定義錯誤提示信息
- 自動或者手動重試
- 內置的校驗規則
- 可編輯文件名稱
使用示例：
（1）手動觸發上傳
<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）編輯文件名稱
<!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）自定義選項
<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）顯示圖片縮略圖
<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）限制文件上傳數
<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>
您可能感興趣的相關文章