首页 / 脚本样式 / JavaScript / 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"）;}