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();  
	            } 
	        }  
	        
		 
	}
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui中,可以使用`table`模块的`toolbar`属性来实现文件下载功能。 首先,需要在表格中添加一个下载按钮,在`table`模块的`toolbar`属性中定义一个自定义的HTML元素,例如: ```javascript table.render({ elem: '#table', url: '/api/data', toolbar: '#toolbar', cols: [ // 表格列配置 ] }); // 定义工具栏 var toolbarHtml = '<div class="layui-btn-container">' + '<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="download">下载</button>' + '</div>'; $('#toolbar').html(toolbarHtml); ``` 然后,在表格的`done`回调函数中监听工具栏按钮的点击事件,使用`window.location.href`来实现文件下载: ```javascript table.render({ elem: '#table', url: '/api/data', toolbar: '#toolbar', cols: [ // 表格列配置 ], done: function(res, curr, count) { // 监听工具栏按钮的点击事件 table.on('toolbar(table)', function(obj) { if(obj.event === 'download') { // 获取选中行的数据 var checkStatus = table.checkStatus('table'); var data = checkStatus.data; if(data.length === 0) { layer.msg('请先选择要下载文件'); return; } // 构造下载链接 var downloadUrl = '/api/download?'; for(var i = 0; i < data.length; i++) { downloadUrl += 'id=' + data[i].id + '&'; } // 执行文件下载 window.location.href = downloadUrl; } }); } }); ``` 上述代码中,`/api/download`是一个后端接口,用于实现文件下载。我们可以将选中行的ID拼接到URL中,后端接口根据这些ID来查询要下载文件并返回给前端。在前端,使用`window.location.href`来实现文件下载。 需要注意的是,由于浏览器的安全机制,直接使用`window.location.href`下载文件时,不能跨域下载。因此,需要将下载接口的域名与当前页面的域名保持一致,或者通过后端代理来实现文件下载

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值