這篇文章主要為大家詳細介紹了JS上傳組件FileUpload自定義模板的使用方法，感興趣的小伙伴們可以參考一下

FileUpload 是國外一個純javascript 寫的大文件上傳組件，該組件支持分片上傳，斷點續(xù)傳，多文件等功能。

下面就為大家分享FileUpload上傳組件自定義模板（FineUploaderBasic）的使用方法：

以下是配置代碼：

前端配置：

<!--定義按鈕-->

<div id="basic_uploader_fine"><i class="icon-upload icon-white"></i>選擇文件</div>

<div id="triggerUpload">點擊上傳</div>

<!--顯示信息-->

<div id="messages"></div>

<div id="cancelUpload" class="buttons">取消</div>

<div id="cancelAll" class="buttons">取消全部</div>

<div id="pauseUpload" class="buttons">暫停上傳</div>

<div id="continueUpload" class="buttons">繼續(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 + '" class="alert" style="margin: 20px 0 0">'+fileName+'</div>');

  },

  onUpload: function(id, fileName) {

   $('#file-' + id).addClass('alert-info')

       .html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' +

        '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;" alt="In progress. Please hold."> ' +

         '上傳文件中......' + progress);

   } else {

   $('#file-' + id).addClass('alert-info')

       .html('<img src="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif" width="50px" height="50px;" alt="Saving. Please hold."> ' +

         '上傳文件中...... ');

   }

  },

  //上傳完成后

  onComplete: function(id, fileName, responseJSON) {

   if (responseJSON.success) {

   var img = responseJSON['target']

   $('#file-' + id).removeClass('alert-info')

       .addClass('alert-success')

       .html('<i class="icon-ok"></i> ' +

         '上傳成功！ ' +

         '“' + fileName + '”'

        );

   } else {

   $('#file-' + id).removeClass('alert-info')

       .addClass('alert-error')

       .html('<i class="icon-exclamation-sign"></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");

}

以上是一個簡單的自定義模板的配置，希望對大家的學(xué)習有所幫助。