FileUpload 是国外一个纯javascript 写的大文件上传组件，该组件支持分片上传，断点续传，多文件等功能。
下面就为大家分享FileUpload上传组件自定义模板（FineUploaderBasic）的使用方法：
以下是配置代码：
前端配置：
<!--定义按钮--> <div><i></i>选择文件</div> <div>点击上传</div> <!--显示信息--> <div></div> <div>取消</div> <div>取消全部</div> <div>暂停上传</div> <div>继续上传</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>'+fileName+'</div>'); }, onUpload: function(id, fileName) { $('#file-' + id).addClass('alert-info') .html('<img src="https://www.jb51.net/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="https://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif" alt="In progress. Please hold."> ' + '上传文件中......' + progress); } else { $('#file-' + id).addClass('alert-info') .html('<img src="https://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif" 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></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"); }
以上是一个简单的自定义模板的配置，希望对大家的学习有所帮助。
您可能感兴趣的文章: