WebUploader是前端实现上传文件的一个控件
可以实现分片上传,跟踪进度,拖拽上传,图片的预览与压缩,拖拽,过滤,多选,黏贴等添加文件方式的可拓展UI组件
1,需求-单页多实例:
一个公司List页面,有一个Table,行项目是各个公司数据
每行都有一个上传的按钮,用于上传本公司下的文件
(需求是先选择图片,再通过点击上传按钮完成上传,故WebUploader控件配置为非立即上传)
1
2
3
2,粗糙的实现:依靠标志位多行共用一个实例
起初,所有行项目依靠一个标志位实现共用一个WebUploader实例
这样的做法如果在A公司上传后,不点击上传按钮,在B公司上传文件后,再点击A行的上传按钮
就会把B公司的文件上传给A公司
1
2
3
3,多个WebUploader实例
1)引入
<script type="text/javascript" src="../lib/webuploader.min.js"></script>
1
2)Html-Table部分代码:
从代码的语法可以看到,这段代码是thymeleaf写的
<table id="resultsTable" class="tabContent">
<tbody>
<tr class="row" th:each="company, companyStatus : ${companyQualificationsList}">
<td class="col-3 text-center">
<div th:text="${company.companyDesc}">企业描述</div>
</td>
<td class="col-4 text-center">
<div class="uploder-container" style="height: 47px;">
<a th:id="@{(${company.companyCode})}" th:class="@{('filePicker pull-left')}"> 浏 览 </a>
<div class="uploadDiv" style="height: 100%;line-height:37px">
<div>
请选择企业资质文件
</div>
</div>
</div>
<div class="clearfix" th:if="${not #lists.isEmpty(company.companyQualificationsList)}" th:each="qualification : ${company.companyQualificationsList}">
<div style="text-align:left" th:id="${qualification.qualificationsCode}">
<span th:text="${qualification.qualificationsDesc}"></span>
<a th:href="${qualification.qualificationsUrl}">下载</a>
<a th:onclick="'javascript:deleteFile(\''+${company.companyCode}+'\',\''+${qualification.qualificationsCode}+'\')'">删除</a>
</div>
</div>
</td>
<td class="col-5 text-center">
<button th:id="${companyStatus.index}" type="button" class="uploaderDone btn btn-h-sm btn-w-sm btn-blue">上传</button>
</td>
</tr>
</tbody>
</table>
3)JS实现WebUploader多实例
思路:
使用一个数组(uploaderArr)用于保存每个行项的WebUploader实例
在页面初始化完成后,JQuery选择器选中所有class=uploder-container的Dom(每个公司的CompanyCode唯一),
循环创建各自的WebUploader实例,并保存到uploaderArr
上传按钮的点击事件是共用的,通过CompanyCode调用对应的WebUploader实例
1
2
3
4
5
var uploaderArr;
$(function(){
uploaderArr = new Array();
$('.uploder-container').each(function(index){
// 根据index找对象
var filePickerObj = $(this).find('.filePicker');
var row = filePickerObj.parent().parent().parent();
var uploadBtn = row.find('.uploaderDone');
var uploadDiv = row.find('.uploadDiv');
// companyCode
var companyCode = filePickerObj.attr('id');
console.log("companyCode = " + companyCode);
// 注册上传控件到uploaderArr : 控件对象,companyCode,
uploaderArr[index] = WebUploader.create({
auto: false,
method:'POST',
server:url,
pick: {
id: filePickerObj,
multiple:false
},
formData:{companyCode: companyCode}
});
uploaderArr[index].on('beforeFileQueued',function(file){
// 类型限制
//if(",jpg,png,ai,zip,rar,psd,pdf,cdr,psd,tif,".indexOf(","+file.ext+",")<0){
// alert("不支持的文件格式");
//}
//文件名长度限制
if(file.name.length > 50){
alert("文件名超长");
return false;
}else{
return true;
}
});
// 当有文件被添加进队列的时候
uploaderArr[index].on('fileQueued', function (file) {
uploadDiv.html("");
if(file.name.length > 50){
stringObject.substring(0,stop)
}
uploadDiv.append('<div >' + file.name + '</div>');
});
//上传成功（注意：后台返回值这里可以获取到)
uploaderArr[index].on('uploadSuccess',function(file,reponse){
if(reponse.resCode == "0"){
alert("上传成功");
}else{
alert("上传失败 原因: " + reponse.message);
}
window.location.reload();
});
// 注册全部按钮事件
uploadBtn.click(function(){
var btnIndex = $(this).attr('id');
var uploader = uploaderArr[btnIndex];
uploader.upload();
});
});
});
不足之处:
这里没有做进度条和图片选择后的预览,网上的例子很多就不赘述了
在此只是提供一个思路,相信通过以上代码修修补补改改,应该可以实现了吧