這篇文章主要為大家詳細介紹了JS上傳組件FileUpload自定義模板的使用方法，感興趣的小伙伴們可以參考一下
FileUpload 是國外一個純javascript 寫的大文件上傳組件，該組件支持分片上傳，斷點續(xù)傳，多文件等功能。
下面就為大家分享FileUpload上傳組件自定義模板（FineUploaderBasic）的使用方法：
以下是配置代碼：
前端配置：
<!--定義按鈕-->
<div id="basic_uploader_fine"><i></i>選擇文件</div>
<div id="triggerUpload">點擊上傳</div>
<!--顯示信息-->
<div id="messages"></div>
<div id="cancelUpload">取消</div>
<div id="cancelAll">取消全部</div>
<div id="pauseUpload">暫停上傳</div>
<div id="continueUpload">繼續(xù)上傳</div>
<script>
$(document).ready(function() {
$fub = $('#basic_uploader_fine');
$messages = $('#messages');
var uploader = new qq.FineUploaderBasic({
debug: true, // 開啟調(diào)試模式
multiple: true, // 多文件上傳
button: $fub[0], //上傳按鈕
autoUpload: false, //不自動上傳則調(diào)用uploadStoredFiless方法 手動上傳
// 驗證上傳文件
validation: {
allowedExtensions: ['jpeg', 'jpg', 'png', 'zip' , 'rar'],
},
// 遠程請求地址（相對或者絕對地址）
request: {
endpoint: 'server/endpoint.php'
},
retry: {
enableAuto: false // defaults to false 自動重試
},
chunking: {
enabled: true,
partSize: 500, // 分組大小，默認為 2M
concurrent: {
enabled: true // 開啟并發(fā)分組上傳，默認并發(fā)3個
},
success: {
endpoint: "server/endpoint.php?done" // 分組上傳完成后處理
}
},
//回調(diào)函數(shù)
callbacks: {
//文件開始上傳
onSubmit: function(id, fileName) {
$messages.append('<div id="file-' + id + '">'+fileName+'</div>');
},
onUpload: function(id, fileName) {
$('#file-' + id).addClass('alert-info')
.html('<img src="client/loading.gif"> ' +
'Initializing ' +
'“' + fileName + '”');
},
//進度條
onProgress: function(id, fileName, loaded, total) {
if (loaded < total) {
progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
$('#file-' + id).removeClass('alert-info')
.html('<img src="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif" width="50px" height="50px;"> ' +
'上傳文件中......' + progress);
} else {
$('#file-' + id).addClass('alert-info')
.html('<img src="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif" width="50px" height="50px;"> ' +
'上傳文件中...... ');
}
},
//上傳完成后
onComplete: function(id, fileName, responseJSON) {
if (responseJSON.success) {
var img = responseJSON['target']
$('#file-' + id).removeClass('alert-info')
.addClass('alert-success')
.html('<i></i> ' +
'上傳成功！ ' +
'“' + fileName + '”'
);
} else {
$('#file-' + id).removeClass('alert-info')
.addClass('alert-error')
.html('<i></i> ' +
'Error with ' +
'“' + fileName + '”: ' +
responseJSON.error);
}
},
onError: function(id, name, reason, maybeXhrOrXdr) {
console.log(id + '_' + name + '_' + reason);
},
}
});
//手動觸發(fā)上傳上傳
$('#triggerUpload').click(function() {
uploader.uploadStoredFiles();
});
//取消某一個上傳
$('#cancelUpload').click(function() {
uploader.cancel(0);
});
//取消所有未上傳的文件
$('#cancelAll').click(function() {
//單個文件上傳沒有作用 因為已經(jīng)在上傳的不能使用這個cancelAll取消上傳
uploader.cancelAll();
});
//暫停上傳某個文件
$('#pauseUpload').click(function() {
uploader.pauseUpload(0);
});
// 繼續(xù)上傳
$('#continueUpload').click(function() {
uploader.continueUpload(0);
});
});
</script>
php代碼：
//handler.php文件官網(wǎng)上下
require_once "handler.php";
$uploader = new UploadHandler();
// 文件類型限制
$uploader->allowedExtensions = array();
// 文件大小限制
$uploader->sizeLimit = null;
// 上傳文件框
$uploader->inputName = "qqfile";
// 定義分組文件存放位置
$uploader->chunksFolder = "chunks";
$method = $_SERVER["REQUEST_METHOD"];
//上傳目的文件夾（由于原來的文件存放規(guī)則不符合我們的需求所以修改了handler.php的代碼添加了個文件夾生成規(guī)則【你也可以自定義】）
$uploadDirectory = $uploader->getPathName('member_avatar');
if ($method == "POST") {
header("Content-Type: text/plain");
// 分組上傳完成后對分組進行合并
if (isset($_GET["done"])) {
$result = $uploader->combineChunks($uploadDirectory); // 合并分組文件
} else {
//開始上傳文件
$result = $uploader->handleUpload($uploadDirectory);
// 獲取上傳的名稱
$result["uploadName"] = $uploader->getUploadName();
}
echo json_encode($result);
}
//刪除文件處理
else if ($method == "DELETE") {
$result = $uploader->handleDelete($uploadDirectory);
echo json_encode($result);
}
else {
header("HTTP/1.0 405 Method Not Allowed");
}
以上是一個簡單的自定義模板的配置，希望對大家的學習有所幫助。