WebUploader

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 = $([''
,''+ file.name +''
,''+ (file.size/1014).toFixed(1) +'kb'
,'已上传'
,''
,''
,'+uuid1+"'"+',this,'+"'"+fileType+"'"+')">删除'
,''
,''].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

/** * 文件上传 WebUploader会循环调用该方法，所以用单文件接收 * @param file * @param request * @param response * @throws Exception */
@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("fileName", files[0].getOriginalFilename());
obj.put("result", result);
response.setStatus(HttpServletResponse.SC_OK);
response.setContentType("text/html");
out.print(obj.toString());
}
/** * 保存文件信息 * @param request * @param djs * @param channelId * @param CmsId * @return */
@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));
}