JS上传组件FileUpload自定义模板的使用方法

<!--定义按钮--><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">继续上传</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 + '" 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);  },    }   }); //手动触发上传上传  $('#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>

//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");}