WebUploader，Baidu文件上传

	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

	/**
	 * 文件上传 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));
	}