FileUpload上传组件自定义模板（FineUploaderBasic）的使用

FileUpload FineUploaderBasic（自定义模板）配置

FileUpload 是国外一个纯javascript 写的大文件上传组件，该组件支持分片上传，断点续传，多文件,跨域等功能。
以下是配置代码：

前端配置：

<!--定义按钮--><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'],        },        //跨域配置        cors: {            expected: true,            sendCredentials: true,            allowXdr: true        },        // 远程请求地址（相对或者绝对地址）        request: {            endpoint: 'server/endpoint.php',            params: {}        },        retry: {           enableAuto: true// defaults to false 自动重试        },         chunking: {            enabled: true,            partSize: 500000, // 分组大小，默认为 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>

php(endpoint.php)代码：

//handler.php文件官网上下require_once "handler.php";       header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");       header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");       header("Cache-Control: no-store, no-cache, must-revalidate");       header("Cache-Control: post-check=0, pre-check=0", false);       header("Pragma: no-cache");       header("Access-Control-Allow-Origin: http://file.com");//跨域域名且不能为通配符       header("Access-Control-Allow-Methods: get, post");       header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept,Cache-Control");       header('Access-Control-Allow-Credentials:true');$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");}

以上是一个简单的自定义模板的配置，如有其他需求请看文档官网自定义模板的参数，方法说明
本人水平有限如有错误欢迎指出！