WebUploader批量上传的使用
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件
API : https://fex.baidu.com/webuploader/doc/index.html
以下是简单使用-上代码 ——————
页面：
<div canwritenull="yes" class="split clearfix fileAtt" id="fileAttid_8">
<p class="text_essas">
<span class="fileAttClass9" spn="y">上传附件名称：</span>
<input type="hidden" value="fileid_8" name="fileid_8" style="background-color: rgb(255, 255, 255);">
<i type="button" disabled="disabled" name="fileid_8" id="fileid_8" class="layui-btn layui-btn-normal filebutton"></i>
</p>
<div class="layui-upload-list" id="demoDiv_fileid_8" style="display: none;">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList_fileid_8"></tbody>
</table>
</div>
</div>
<div canwritenull="yes" class="split clearfix fileAtt" id="fileAttid_9">
<p class="text_essas">
<span class="fileAttClass9" spn="y">上传附件名称：</span>
<input type="hidden" value="fileid_9" name="fileid_9" style="background-color: rgb(255, 255, 255);">
<i type="button" disabled="disabled" name="fileid_9" id="fileid_9" class="layui-btn layui-btn-normal filebutton"></i>
</p>
<div class="layui-upload-list" id="demoDiv_fileid_9" style="display: none;">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList_fileid_9"></tbody>
</table>
</div>
</div>
<link rel="stylesheet" type="text/css" href="${base}/util/webuploader/webuploader.css">
<script type="text/javascript" src="${base}/util/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${base}/util/webuploader/webuploader.min.js"></script>
<#-- 多按钮多文件上传 -->
<script>
var uploader = WebUploader.create({
swf: '${base}/util/webuploader/Uploader.swf',
duplicate: true,
auto: true,
server: "${base}/api/column/upload_auditFile.action",
pick: ".filebutton",
fileVal : "file",
threads: 10,
<#--
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
fileSingleSizeLimit: 2000,
//上传文件数量限制
fileNumLimit:10,
//上传前不压缩
compress:false,-->
});
//当文件被加入队列之前触发
uploader.on('beforeFileQueued', function(file) {
var fileClass = file.source._refer[0].id;
var uuid1 = uuid(32, 16);
var demoListView = $("#demoList_"+fileClass);
var demoDivView = $("#demoDiv_"+fileClass);
var fileType = file.name.substr(file.name.indexOf(".")+1);
var tr = $(['<tr id="upload-'+ uuid1 +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td>已上传</td>'
,'<td>'
,'<input type="hidden" name="fileuuid" labelId="" fliename="'+file.name+'" fileSize="'+(file.size/1014).toFixed(1)+'" fileClass="'+fileClass+'" value="'+uuid1+'">'
,'<a href="javascript:void(0)" class="layui-btn layui-btn-xs layui-btn-danger" οnclick="delfile('+"'"+uuid1+"'"+',this,'+"'"+fileType+"'"+')">删除</a>'
,'</td>'
,'</tr>'].join(''));
demoListView.append(tr);
demoDivView.css("display","inline");
<#--
if('${CmsId}'!=''){
log('${CmsId}')
savefile('${channelId}','${CmsId}');
}
-->
});
//当一批文件添加进队列以后触发(用来保存文件信息)
uploader.on('filesQueued', function(file) {
if('${CmsId}'!=''){
savefile('${channelId}','${CmsId}');
}
});
<#--
//当有一批文件加载进队列时触发事件
uploader.on("fileQueued", webFilesQueued);
//单个文件开始上传
uploader.on("uploadStart", uploadStart);
//单个文件上传成功
uploader.on("uploadSuccess", uploadSuccess);
//单个文件上传过程中
uploader.on("uploadProgress", uploadProgress);
//所有文件上传结束
uploader.on("uploadFinished", uploadComplete);
//图片校验不通过时
uploader.on("error", webFileQueueError);
//上传出错时
uploader.on("uploadError",webUploadError);
-->
//在这里用的是我之前文件上传文章相类似的方法 https://blog.csdn.net/qq_36910987/article/details/88895839
//<#-- 获取所有上传文件ID,name -->
function getfileId(){
var djs = [];
$("input[name='fileuuid']").each(function(){
var id = $(this).val();
var name = $(this).attr("fliename");
var label = $(this).attr("fileClass");
var fileSize = $(this).attr("fileSize");
djs.push({'name' : id,'value' : name,'label':label,'filesize':fileSize});
log(djs)
});
return djs;
}
//<#-- 保存文件信息 approval:审批流程ID -->
function savefile(channelId,CmsId){
var djs = getfileId();
$.ajax({
type:'post',
url : get_web_url()+'/api/column/savefile.action',
data : {"djs":JSON.stringify(djs),"channelId":channelId,"CmsId":CmsId},
success : function(data){
resultVO.checkCode(data, function (data) {
if(data){
log(data);
}else{
log("凉凉");
}
});
},
error : function(){
layeropen('2','发生意外错误!');
}
});
}
//<#-- 删除文件 -->
function delfile (id,obj,fileType){
var conlay = layer.confirm('确定要删除文件吗？', {
btn: ['确定','取消'] //按钮
}, function(){
$.ajax({
type:'post',
url : get_web_url()+'/api/column/delfile.action',
data : {"id":id,"fileType":fileType},
success : function(data){
resultVO.checkCode(data, function (data) {
if(data){
$(obj).parent().parent().remove();
layer.close(conlay);
}else{
log("凉凉");
}
});
},
error : function(){
layeropen('2','发生意外错误!');
}
});
},function(){
});
}
</script>
JAVA
@RequestMapping("/upload_auditFile")
public void upload_auditFile(MultipartFile file,HttpServletRequest request,HttpServletResponse response) throws Exception{
String result = columnService.upload_auditFile(file);
JSONObject obj = new JSONObject();
PrintWriter out = response.getWriter();
obj.put("result", result);
response.setStatus(HttpServletResponse.SC_OK);
response.setContentType("text/html");
out.print(obj.toString());
}
@RequestMapping("/savefile")
public ResultVO savefile(HttpServletRequest request,String djs,String channelId,String CmsId) {
djs = StringEscapeUtils.unescapeHtml4(djs);
List<jsonbean> arrayList = (List<jsonbean>) JSON.parseArray(djs, jsonbean.class);
return new ResultVO(columnService.savefile(arrayList, channelId, CmsId));
}
