一、uploadifive介紹
uploadifive是一款基於jQuery的開源文件上傳插件，可以將文件快速上傳到伺服器。相比較其他文件上傳插件，uploadifive具有過程可視化、上傳進度條、文件隊列等特點。除了可以上傳文件外，還支持取消上傳、上傳前的自定義驗證、上傳完成後的回調等功能。
以下是一個簡單的uploadifive文件上傳示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>uploadifive示例</title>
<script src="jquery.min.js"></script>
<script src="jquery.uploadifive.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadifive.css">
</head>
<body>
<input type="file" name="file_upload" id="file_upload">
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php', // 上傳地址
'buttonText' : '選擇文件', // 按鈕文本
'fileSizeLimit': '2MB', // 文件大小限制
'uploadLimit' : 5, // 單次上傳數量限制
'queueSizeLimit' : 10, // 文件隊列數量限制
'onUploadComplete' : function(file, data) { // 上傳完成回調函數
console.log(file.name + ' 上傳成功！');
}
});
</script>
</body>
</html>
二、上傳前的驗證
在上傳文件之前，通常需要對文件進行驗證，比如判斷文件大小、類型等是否符合要求。uploadifive提供了一個回調函數，可以在上傳之前對文件進行驗證。
以下是通過回調函數進行文件驗證的示例：
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php',
'buttonText' : '選擇文件',
'fileSizeLimit': '2MB',
'uploadLimit' : 5,
'queueSizeLimit' : 10,
'onUploadComplete' : function(file, data) {
console.log(file.name + ' 上傳成功！');
},
'onUploadStart' : function(file) { // 上傳前的回調函數
if (!(/\.(jpg|jpeg|png|gif)$/i).test(file.name)) { // 限制文件類型為jpg、png、gif
alert('只能上傳圖片文件！');
return false;
}
if (file.size > 2 * 1024 * 1024) { // 限制文件大小為2MB
alert('文件大小超出限制！');
return false;
}
}
});
</script>
三、上傳進度條
uploadifive支持上傳進度條，可以讓用戶清楚地看到文件上傳的進度。進度條的樣式可以通過自定義CSS進行修改。
以下是添加上傳進度條的示例：
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php',
'buttonText' : '選擇文件',
'fileSizeLimit': '2MB',
'uploadLimit' : 5,
'queueSizeLimit' : 10,
'onUploadComplete' : function(file, data) {
console.log(file.name + ' 上傳成功！');
},
'onProgress' : function(file, e) { // 上傳過程中的回調函數
var percent = Math.round((e.loaded / e.total) * 100); // 計算上傳進度
$('#file_upload').find('.uploadifive-progress .progress-bar').css('width', percent + '%'); // 設置進度條長度
}
});
</script>
四、文件隊列
uploadifive支持文件隊列，可以讓用戶清楚地看到當前上傳的文件情況。文件隊列的樣式可以通過自定義CSS進行修改。
以下是添加文件隊列的示例：
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php',
'buttonText' : '選擇文件',
'fileSizeLimit': '2MB',
'uploadLimit' : 5,
'queueSizeLimit' : 10,
'onUploadComplete' : function(file, data) {
console.log(file.name + ' 上傳成功！');
},
'onProgress' : function(file, e) {
var percent = Math.round((e.loaded / e.total) * 100);
$('#file_upload').find('.uploadifive-progress .progress-bar').css('width', percent + '%');
},
'onAddQueueItem' : function(file) { // 添加文件到隊列時的回調函數
$('#file_upload_queue').append('<div class="uploadifive-queue-item"><span class="uploadifive-queue-item-name">' + file.name + '</span><span class="uploadifive-queue-item-size">' + Math.round(file.size / 1024) + 'KB</span></div>');
},
'onUpload' : function(filesToUpload) { // 開始上傳時的回調函數
$('#file_upload_queue').find('.uploadifive-queue-item').addClass('processing');
},
'onUploadComplete' : function(file, data) {
$('#file_upload_queue').find('.uploadifive-queue-item.processing').remove();
}
});
</script>
<div id="file_upload_queue"></div>
五、取消上傳
uploadifive支持取消上傳，可以讓用戶取消正在上傳的文件。取消上傳的文件可以從文件隊列中移除。
以下是添加取消上傳功能的示例：
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script>
$('#file_upload').uploadifive({
'uploadScript' : 'upload.php',
'buttonText' : '選擇文件',
'fileSizeLimit': '2MB',
'uploadLimit' : 5,
'queueSizeLimit' : 10,
'onUploadComplete' : function(file, data) {
console.log(file.name + ' 上傳成功！');
},
'onProgress' : function(file, e) {
var percent = Math.round((e.loaded / e.total) * 100);
$('#file_upload').find('.uploadifive-progress .progress-bar').css('width', percent + '%');
},
'onAddQueueItem' : function(file) {
$('#file_upload_queue').append('<div class="uploadifive-queue-item" id="' + file.id + '"><span class="uploadifive-queue-item-name">' + file.name + '</span><span class="uploadifive-queue-item-size">' + Math.round(file.size / 1024) + 'KB</span><span class="uploadifive-queue-item-cancel">取消</span></div>');
$('#' + file.id + ' .uploadifive-queue-item-cancel').click(function() { // 點擊取消按鈕時取消上傳
var cancelled = $('#file_upload').uploadifive('cancel', file.id); // 取消上傳
if (cancelled) { // 移除文件隊列中的文件
$('#' + file.id).remove();
}
});
},
'onUpload' : function(filesToUpload) {
$('#file_upload_queue').find('.uploadifive-queue-item').addClass('processing');
},
'onUploadComplete' : function(file, data) {
$('#file_upload_queue').find('.uploadifive-queue-item.processing').remove();
}
});
</script>
<div id="file_upload_queue"></div>
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/285766.html
微信掃一掃 
支付寶掃一掃 