FileUpload 是國外一個純javascript 寫的大文件上傳組件，該組件支持分片上傳，斷點續傳，多文件等功能。
下面就為大家分享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">繼續上傳</div><script> $(document).ready(function() { $fub = $('#basic_uploader_fine'); $messages = $('#messages'); var uploader = new qq.FineUploaderBasic({ debug: true, // 開啟調試模式multiple: true, // 多文件上傳button: $fub[0], //上傳按鈕autoUpload: false, //不自動上傳則調用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 // 開啟並發分組上傳，默認並發3個}, success: { endpoint: "server/endpoint.php?done" // 分組上傳完成後處理} }, //回調函數callbacks: { //文件開始上傳onSubmit: function(id, fileName) { $messages.append('<div id="file-' + id + '" style="margin: 20px 0 0">'+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"> ' + '上傳文件中......' + progress); } else { $('#file-' + id).addClass('alert-info') .html('<img src="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif"> ' + '上傳文件中...... '); } }, //上傳完成後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); }, } }); //手動觸發上傳上傳$('#triggerUpload').click(function() { uploader.uploadStoredFiles(); }); //取消某一個上傳$('#cancelUpload').click(function() { uploader.cancel(0); }); //取消所有未上傳的文件$('#cancelAll').click(function() { //單個文件上傳沒有作用因為已經在上傳的不能使用這個cancelAll取消上傳uploader.cancelAll(); }); //暫停上傳某個文件$('#pauseUpload').click(function() { uploader.pauseUpload(0); }); // 繼續上傳$('#continueUpload').click(function() { uploader.continueUpload(0); });});</script>php代碼：
//handler.php文件官網上下require_once "handler.php";$uploader = new UploadHandler();// 文件類型限制$uploader->allowedExtensions = array(); // 文件大小限制$uploader->sizeLimit = null;// 上傳文件框$uploader->inputName = "qqfile";// 定義分組文件存放位置$uploader->chunksFolder = "chunks";$method = $_SERVER["REQUEST_METHOD"];//上傳目的文件夾（由於原來的文件存放規則不符合我們的需求所以修改了handler.php的代碼添加了個文件夾生成規則【你也可以自定義】）$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");}以上是一個簡單的自定義模板的配置，希望對大家的學習有所幫助。