赞
踩
下面展示一些 内联代码片。
内联代码片
// A code block <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="utf-8" /> <app:include type="css" /> <link rel="stylesheet" type="text/css" href="${CUSTOM_THEME_PATH }assets/plugins/jquery-file-upload/css/jquery.fileupload-ui.css" /> <link rel="stylesheet" type="text/css" href="${CUSTOM_THEME_PATH }assets/plugins/bootstrap-fileupload/bootstrap-fileupload.css" /> <style type="text/css"> </style> </head> <body class=""> <div class="container-fluid"> <div class=""> <div class="row"> <div class="col-md-12"> <form class="form-inline form-table" role="form" id="submit-form" action="${CONTEXT_PATH}supplier/files/upload" method="post"> <input type="hidden" value="${domain.supplierFile.businessId }" name="businessId"> <input type="hidden" value="${domain.supplierFile.businessType }" name="businessType"> <div class="form-body"> <table class="table table-bordered table-condensed"> <colgroup> <col width="25%" /> </colgroup> <tbody> <tr> <td class="form-label"> <label class="control-label"> 上传文件 <span class="required">*</span> </label> </td> <td> <input type="file" name="attachFiles" class="pull-left" filetype="file" required="true" paidfilename="true" /> </td> </tr> </tbody> </table> </div> </form> </div> </div> </div> </div> <app:include type="javascript" /> <script type="text/javascript" src="${CUSTOM_THEME_PATH }assets/plugins/bootstrap-fileupload/bootstrap-fileupload.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { //上传附件 $('#fileupload-attach').fileupload({ dataType : 'json', pasteZone : null, autoUpload : true, url : "${CONTEXT_PATH}supplier/invoicings/upload", maxNumberOfFiles : 5, maxFileSize : 58 * 1024 * 1024, // 60m acceptFileTypes : /(\.|\/)(mp4|txt|xlsx?|docx?|inf|gif|jpe?g|png|pdf?)$/i, downloadTemplateId : "template-download-attach" }); }); </script> </body> </html>;
前端简单页面弹框效果
后端简单实现
// An highlighted block @RequestMapping(value = "to/upload", method = { RequestMethod.GET }) public String toUpload(@ModelAttribute("domain") SupplierFileDo domain, @RequestParam("businessId") Integer businessId, @RequestParam("businessType") String businessType) { SupplierFile supplierFile = new SupplierFile(); supplierFile.setBusinessId(businessId); supplierFile.setBusinessType(businessType); domain.setSupplierFile(supplierFile); return "supplier/supplier_file_upload"; } @RequestMapping(value = "upload", method = { RequestMethod.POST }) @ResponseBody public ResponseJson uploadAttachmnet(@RequestParam("businessId") Integer businessId, @RequestParam("businessType") String businessType, @RequestParam("attachFiles") MultipartFile multiPartFile) { ResponseJson responseJson = new ResponseJson(); if (multiPartFile != null && multiPartFile.getSize() > 0) { // 获取原文件名 String filename = multiPartFile.getOriginalFilename(); String newfilename = CommonUtils.newFileNameByTime(filename); String uploadPath = "/home/upload_file/"; if (StringUtils.isBlank(uploadPath)) { responseJson.setStatus(StatusCode.FAIL); responseJson.setMessage("系统异常,请稍后。"); return responseJson; } SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd"); String format = dateFormat.format(new Date()); String filePath = format + "/" + newfilename; try { FileUtil.writeFromStream(multiPartFile.getInputStream(), uploadPath + filePath); } catch (IOException e) { e.printStackTrace(); } SupplierFile supplierFile = new SupplierFile(); supplierFile.setBusinessId(businessId); supplierFile.setBusinessType(businessType); supplierFile.setFileName(newfilename); supplierFile.setFilePath(filePath); supplierFileService.createSupplierFile(supplierFile); } return responseJson; } @RequestMapping(value = "to/download", method = { RequestMethod.POST }) public String toDownload(@ModelAttribute("domain") SupplierFileDo domain, @RequestParam("businessId") Integer businessId, @RequestParam("businessType") String businessType) { List<SupplierFile> supplierFiles = supplierFileService.querySupplierFileList(businessId, businessType); domain.setSupplierFiles(supplierFiles); return "supplier/supplier_file_list"; } @RequestMapping(value = "download", method = { RequestMethod.GET }) public void download(@RequestParam("id") Integer id, HttpServletRequest request, HttpServletResponse response) { SupplierFile supplierFile = supplierFileService.getSupplierFile(id); // 解决文件名乱码或不显示 String newfilename = supplierFile.getFileName(); try { newfilename = new String(supplierFile.getFileName().getBytes(StandardCharsets.UTF_8), "iso8859-1"); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } response.setHeader("Content-Disposition", "attachment;filename=\"" + (newfilename) + "\""); OutputStream output = null; BufferedInputStream inputStream = null; try { output = response.getOutputStream(); String uploadPath = "/home/upload_file/"; inputStream = FileUtil.getInputStream(uploadPath + supplierFile.getFilePath()); IOUtils.copy(inputStream, output); } catch (IOException e) { throw new RuntimeException(e); } finally { IOUtils.closeQuietly(inputStream); IOUtils.closeQuietly(output); } }
上传文件要没有FTP服务器,就用流,然后设计一个表,点击下载跳转到当前上传过的记录,在用IO下载下来, CREATE TABLE t_supplier_file ( id int(11) NOT NULL AUTO_INCREMENT COMMENT ‘主键’, business_id int(11) DEFAULT NULL COMMENT ‘标识’, business_type varchar(32) DEFAULT NULL COMMENT ‘业务类型’, file_name varchar(255) DEFAULT NULL COMMENT ‘文件名称’, file_path varchar(255) DEFAULT NULL COMMENT ‘文件路径’, create_time datetime DEFAULT NULL COMMENT ‘创建时间’, PRIMARY KEY (id) ) ENGINE=InnoDB CHARSET=utf8mb4 COMMENT=‘文件表’;
t_supplier_file
id
business_id
business_type
file_name
file_path
create_time
简单的上传以及下载,从前端到后端,各位在创建那个文件路径的时候,放到部署项目的外面的文件夹,记清楚,有dockker环境下的,在创建目录后,上传有时候不好找文件,不要跳坑。一般都有ftp 服务器,这个只是临时的项目存放路径,这个针对带宽也有一定的要求!