JS上传组件FileUpload自定义模板的使用方法
FileUpload是国外一个纯javascript写的大文件上传组件，该组件支持分片上传，断点续传，多文件等功能。
下面就为大家分享FileUpload上传组件自定义模板（FineUploaderBasic）的使用方法：
以下是配置代码：
前端配置：
<!--定义按钮-->
<divid="basic_uploader_fine"><iclass="icon-uploadicon-white"></i>选择文件</div>
<divid="triggerUpload">点击上传</div>
<!--显示信息-->
<divid="messages"></div>
<divid="cancelUpload"class="buttons">取消</div>
<divid="cancelAll"class="buttons">取消全部</div>
<divid="pauseUpload"class="buttons">暂停上传</div>
<divid="continueUpload"class="buttons">继续上传</div>
<script>
$(document).ready(function(){
$fub=$('#basic_uploader_fine');
$messages=$('#messages');
varuploader=newqq.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//defaultstofalse自动重试
},
chunking:{
enabled:true,
partSize:500,//分组大小，默认为2M
concurrent:{
enabled:true//开启并发分组上传，默认并发3个
},
success:{
endpoint:"server/endpoint.php?done"//分组上传完成后处理
}
},
//回调函数
callbacks:{
//文件开始上传
onSubmit:function(id,fileName){
$messages.append('<divid="file-'+id+'"class="alert"style="margin:20px00">'+fileName+'</div>');
},
onUpload:function(id,fileName){
$('#file-'+id).addClass('alert-info')
.html('<imgsrc="client/loading.gif"alt="Initializing.Pleasehold.">'+
'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('<imgsrc="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif"width="50px"height="50px;"alt="Inprogress.Pleasehold.">'+
'上传文件中......'+progress);
}else{
$('#file-'+id).addClass('alert-info')
.html('<imgsrc="http://img.zcool.cn/community/01ff2756629d096ac725b2c8e95102.gif"width="50px"height="50px;"alt="Saving.Pleasehold.">'+
'上传文件中......');
}
},
//上传完成后
onComplete:function(id,fileName,responseJSON){
if(responseJSON.success){
varimg=responseJSON['target']
$('#file-'+id).removeClass('alert-info')
.addClass('alert-success')
.html('<iclass="icon-ok"></i>'+
'上传成功！'+
'“'+fileName+'”'
);
}else{
$('#file-'+id).removeClass('alert-info')
.addClass('alert-error')
.html('<iclass="icon-exclamation-sign"></i>'+
'Errorwith'+
'“'+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=newUploadHandler();
//文件类型限制
$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();
}
echojson_encode($result);
}
//删除文件处理
elseif($method=="DELETE"){
$result=$uploader->handleDelete($uploadDirectory);
echojson_encode($result);
}
else{
header("HTTP/1.0405MethodNotAllowed");
}
以上是一个简单的自定义模板的配置，希望对大家的学习有所帮助。