layui 文件上传下载

文件上传(已实现)

前端代码(js)


table.on('toolbar(testable)', function(obj) {
	 switch (obj.event) {
               case 'uploadFileTestable':
                   $("#uploadFile-button").click();
                   break;
   		}
	
	})
//文件上传
	var uploadFile = upload.render({
		elem:'#uploadFile-button',
		url:'newsysfile.do?action=saveFile&noticeId=' + noticeId,
		accept:'file',
		 before: function(obj) {
		 
		  // layer.msg("正在导入文件...", {shade:0.4, icon:16, time:false});
	   },
		done:function(res,index,upload){ //上传后的回调
		
			//自定义事件
			table.reload('testable');
			
		}, 
		 choose: function (obj) {
			//自定义事件
			table.reload('testable');
			
		},
		error: function(index, upload){
			//自定义事件
			table.reload('testable');
			
		}
		
	})

前端代码(jsp)

<div class="layui-form">
				<table class="layui-hide" id="testable" lay-filter="testable"></table>
				<button type="button" class="layui-btn" id="uploadFile-button" style="display:none">上传文件</button>
				<script type="text/html" id="testable-toolbar">
           				   <div class="layui-btn-container">
							  <button class="layui-btn layui-btn-sm" lay-event="uploadFileTestable"><i class="layui-icon layui-icon-addition"></i>上传</button>
        					  <button class="layui-btn layui-btn-sm" lay-event="batchDelTestable" type="reset"><i class="layui-icon layui-icon-delete"></i>删除</button>
           					  <button class="layui-btn layui-btn-sm" lay-event="freshenTestable"><i class="layui-icon layui-icon-refresh"></i>刷新</button>
							  <button class="layui-btn layui-btn-sm" lay-event="downloadTestable"><i class="layui-icon layui-icon-export"></i>下载</button>
							  <iframe id="fileFrame" width="0" height="0"></iframe>
						   </div>
     			</script>
			</div>

后端代码


	@RequestMapping(params = "action=saveFile")
	public void saveFile(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		String noticeId = request.getParameter("noticeId");
		Notice notice = NoticeFactory.getNoticeService().getNotice(noticeId);
		User user = LoginInfo.getUser(request);
		MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
		MultipartFile multiFile = multiRequest.getFile("file");
		File file = new File("file");
		FileUtils.copyInputStreamToFile(multiFile.getInputStream(), file);
		SysFile sysfile = SysFile.build(user, file, notice.OBJTYPE, noticeId);
		sysfile.setFileData(multiFile.getInputStream());
		sysfile.setFileName(multiFile.getOriginalFilename());
		SysFileFactory.getSysFileService().insert(sysfile);

		JsonResp resp = new JsonResp(response);
		JSONObject row = new JSONObject();
		row.put("code", 0);
		row.put("success", true);
		row.put("fileId", sysfile.getFileId());
		resp.sendHtml(row.toString(4));
	}

数据库

注意fileDate格式(blob)

CREATE TABLE [dbo].[SysFile] (
  [FileId] varchar(36) COLLATE Chinese_PRC_CI_AS  NOT NULL,
  [RefObjType] varchar(50) COLLATE Chinese_PRC_CI_AS DEFAULT NULL NULL,
  [RefObjId] varchar(50) COLLATE Chinese_PRC_CI_AS DEFAULT NULL NULL,
  [FileName] varchar(100) COLLATE Chinese_PRC_CI_AS DEFAULT NULL NULL,
  [FileSize] int DEFAULT NULL NULL,
  [FileType] varchar(30) COLLATE Chinese_PRC_CI_AS DEFAULT NULL NULL,
  [FileDesc] varchar(100) COLLATE Chinese_PRC_CI_AS DEFAULT NULL NULL,
  [Creator] int DEFAULT NULL NULL,
  [CreateTime] datetime DEFAULT NULL NULL,
  [FileData] varbinary(max) DEFAULT NULL NULL,
  [FilePath] varchar(200) COLLATE Chinese_PRC_CI_AS DEFAULT NULL NULL
)

文件下载(选择多个)

前端代码


	//文件下载
	var downloadTestable = function(index) {
		var checkStatus = table.checkStatus("testable");
		var data = checkStatus.data; //拿到行数据
		//定义要发送的后台参数
		

		$.each(data, function(i, item) {
			if (i == 0) {
				alert("000")
				setTimeout(function (){
					document.getElementById("fileFrame").src = "newsysfile.do?action=downloadFile&fileId=" + item.fileId;
					
				}, 2000);
					
			} else {
				alert("111")
				setTimeout(function (){
					document.getElementById("fileFrame").src = "newsysfile.do?action=downloadFile&fileId=" + item.fileId;
				}, 2000);
			}
			
		})
		table.reload('testable');
	}

下载后端代码

@RequestMapping(params = "action=downloadFile")
	public void downloadFile(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	
		 
		String fileId = request.getParameter("fileId"); 
		SysFile sysfile = SysFileFactory.getSysFileService().getRecord(fileId);
		request.setAttribute("FileName", sysfile.getFileName());
		String type = request.getParameter("type");
		
		OutputStream output = response.getOutputStream();  
		
		  try {  
			  response.reset();  
	            if (type == null) {
	            	type = "attachment";
	            }
	            response.setHeader("Access-Control-Expose-Headers", "Content-Disposition") ;
	   
	            response.setHeader("Content-Disposition", type + "; filename=\""
	    				+ new String(sysfile.getFileName().getBytes("UTF-8"), "iso-8859-1") + "\"");
	   
	            SysFileFactory.getSysFileService().copyToStream(fileId, output);
				output.flush(); 
	        } finally {  
	            if (output != null) {  
	            	output.close();  
	            } 
	        }  
	        
		 
	}

你可能感兴趣的:(layui框架学习笔记,layui,servlet,java,web)