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

FileUpload 是国外一个纯javascript 写的大文件上传组件，该组件支持分片上传，断点续传，多文件等功能。
下面就为大家分享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">继续上传</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>

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

以上是一个简单的自定义模板的配置，希望对大家的学习有所帮助。

您可能感兴趣的文章:

• FileUpload使用Javascript检查扩展名是否有效实现思路
• Extjs的FileUploadField文件上传出现了两个上传按钮
• js判断上传文件类型判断FileUpload文件类型代码
• 使用AjaxFileUpload.js实现异步文件上传示例
• 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
• 使用ajaxfileupload.js实现ajax上传文件php版
• ajaxFileUpload.js插件支持多文件上传的方法
• asp.net+ajaxfileupload.js 实现文件异步上传代码分享
• JQuery插件ajaxfileupload.js异步上传文件实例
• JavaScript判断FileUpload控件上传文件类型