1.pom.xml配置
application.yml
server: port: 7007 tomcat: uri-encoding : UTF-8 spring: application: name: push-svc-demo thymeleaf: encoding: UTF-8 cache: false mode: LEGACYHTML5 data: mongodb: host: 127.0.0.1 port: 27017 database: mydb debug: false
<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.10.RELEASE</version> <relativePath/> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency> <!--添加文件上传支持--> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <!--添加html5支持--> <dependency> <groupId>net.sourceforge.nekohtml</groupId> <artifactId>nekohtml</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>
2.进程类
public class Progress { private long bytesRead; //已读取文件的比特数 private long contentLength;//文件总比特数 private long items; //正读的第几个文件 public long getBytesRead() { return bytesRead; } public void setBytesRead(long bytesRead) { this.bytesRead = bytesRead; } public long getContentLength() { return contentLength; } public void setContentLength(long contentLength) { this.contentLength = contentLength; } public long getItems() { return items; } public void setItems(long items) { this.items = items; } }
3.监听类
@Component public class FileUploadProgressListener implements ProgressListener { private HttpSession session; public void setSession(HttpSession session){ this.session=session; Progress status = new Progress();//保存上传状态 session.setAttribute("status", status); } @Override public void update(long bytesRead, long contentLength, int items) { Progress status = (Progress) session.getAttribute("status"); status.setBytesRead(bytesRead); status.setContentLength(contentLength); status.setItems(items); } }
4.
public class CustomMultipartResolver extends CommonsMultipartResolver { // 注入第二步写的FileUploadProgressListener @Autowired private FileUploadProgressListener progressListener; public void setFileUploadProgressListener(FileUploadProgressListener progressListener) { this.progressListener = progressListener; } @Override public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException { String encoding = determineEncoding(request); FileUpload fileUpload = prepareFileUpload(encoding); progressListener.setSession(request.getSession());// 问文件上传进度监听器设置session用于存储上传进度 fileUpload.setProgressListener(progressListener);// 将文件上传进度监听器加入到 fileUpload 中 try { List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request); return parseFileItems(fileItems, encoding); } catch (FileUploadBase.SizeLimitExceededException ex) { throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex); } catch (FileUploadException ex) { throw new MultipartException("Could not parse multipart servlet request", ex); } } }
5.控制器
@RestController public class FileController { // private final static Logger logger = // LoggerFactory.getLogger(FileController.class); @Autowired private PushMsgRepository pushRep; public static void log(Object o) { System.out.println(o); } @RequestMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return "文件为空"; } // 获取文件名 String fileName = file.getOriginalFilename(); System.out.println("上传的文件名为:" + fileName); // 获取文件的后缀名 // String suffixName = fileName.substring(fileName.lastIndexOf(".")); // logger.info("上传的后缀名为:" + suffixName); // 文件上传后的路径 String filePath = null; try { filePath = new File("").getCanonicalPath() + "/tmp/uploadFile/"; } catch (IOException e1) { e1.printStackTrace(); } String tagFilePath = filePath + CommonUtil.getCurrentTime() + fileName; System.out.println("存储路径为:" + tagFilePath); // 解决中文问题,liunx下中文路径,图片显示问题 // fileName = UUID.randomUUID() + suffixName; File dest = new File(tagFilePath); // 检测是否存在目录 if (!dest.getParentFile().exists()) { dest.getParentFile().mkdirs(); } try { file.transferTo(dest); PushMsgEntity pushInfo=new PushMsgEntity(); pushInfo.setFilePath(fileName); pushInfo.setUserName("深圳"); pushRep.save(pushInfo); return fileName + "推送成功"; } catch (IllegalStateException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return fileName + "推送失败"; } @RequestMapping("/uploads") public Map<String, Object> uploadFiles(HttpServletRequest request) { Map<String, Object> result = new HashMap<String, Object>(); List<MultipartFile> files2 = ((MultipartHttpServletRequest) request).getFiles("file"); BufferedOutputStream stream = null; String uploadPath = "upload/"; validatePath(uploadPath); result.put("fileLength", files2.size()); int i = 0; for (MultipartFile file : files2) { String originalFilename = file.getOriginalFilename(); i++; validateType(uploadPath); if (!file.isEmpty()) { try { byte[] bytes = file.getBytes(); stream = new BufferedOutputStream(new FileOutputStream(new File(uploadPath, originalFilename))); stream.write(bytes); result.put("file" + i, uploadPath + originalFilename); stream.close(); } catch (Exception e) { result.put("message", originalFilename + "You failed to upload => " + e.getMessage()); } } else { result.put("message", originalFilename + "You failed to upload because the file was empty."); } } return result; } /** * 验证上传的文件类型 * * @return */ private Map<String, Object> validateType(String path) { Map<String, Object> result = new HashMap<String, Object>(); File file = new File(path); if (!file.exists()) file.mkdirs(); return result; } /** * 验证上传的文件路径,没有则创建 * * @return */ private void validatePath(String path) { File file = new File(path); if (!file.exists()) file.mkdirs(); } @RequestMapping("/showPushInfo") public List<PushMsgEntity> showAllPushInfo() { return pushRep.findAll(new Sort(Direction.DESC, "generateTime")); } }
6.启动类
@EnableAutoConfiguration(exclude = { MultipartAutoConfiguration.class }) @SpringBootApplication public class Application extends SpringBootServletInitializer { /* * 将 multipartResolver 指向我们刚刚创建好的继承 CommonsMultipartResolver 类的自定义文件上传处理类 */ @Bean(name = "multipartResolver") public MultipartResolver multipartResolver() { CustomMultipartResolver customMultipartResolver = new CustomMultipartResolver(); return customMultipartResolver; } @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.sources(Application.class); } public static void main(String[] args) { SpringApplication.run(Application.class, args); } }
7.页面测试
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Upload Files using XMLHttpRequest - Minimal</title> <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.css" /> <script src="/vendor/jquery/jquery-1.10.2.min.js"></script> <script src="/vendor/bootstrap/js/bootstrap.min.js"></script> </head> <body class="container"> <div id="wrapper"> <div id="page-wrapper"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">数据推送系统服务端</h1> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading">数据推送系统服务端</div> <div class="panel-body"> <div class="row"> <div class="col-lg-6"> <form role="form" action="javascript:void(0)"> <div class="form-group"> <label>模型文件选择</label> <input id="batchFile" class="btn btn-primary" name="file" type="file" /> <div id="showFieInfo" class="form-group"> <label id="upfileName"></label><br /> <label id="upfileSize"></label><br /> <label id="upfileType"></label><br /> </div> <!-- <label for="name">选择推送地域</label> <select class="form-control"> <option>深圳</option> <option>东莞</option> <option>印度</option> </select> --> <label for="name">选择推送的地域(可多选)</label> <select multiple class="form-control"> <option>西安</option> <option>深圳</option> <option>东莞</option> <option>印度</option> <option>宜宾</option> <option>武汉</option> <option>宜宾</option> </select> </div> <div class="progress progress-striped active" style="display: none"> <div id="progressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" style="width: 0%"></div> </div> <div class="form-group"> <button id="batchUploadBtn" type="submit" class="btn btn-primary">上传文件</button> <label id="showInfo"></label> </div> <div class="form-group"> <img id="imageUpload" alt="上传的后数据" src="" width="100%" /> </div> </form> </div> </div> <!-- /.row (nested) --> </div> <!-- /.panel-body --> </div> <!-- /.panel --> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> </div> <!-- /#page-wrapper --> </div> <!-- /#wrapper --> <div id="wrapper"> <div id="page-wrapper"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">推送历史信息</h1> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading">推送历史记录</div> <div class="panel-body"> <div id=""> <table id="showPushInfo" class="table table-striped table-hover "> </table> </div> </div> <!-- /.panel-body --> </div> <!-- /.panel --> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> </div> <!-- /#page-wrapper --> </div> <!-- /#wrapper --> </body> <script type="text/javascript"> /* <![CDATA[> */ $(document) .ready( function() { $("#batchImportBtn").click(function() { $(‘#batchImportModal‘).modal(‘show‘); }); var base = $("#base").val(); base = ‘‘; showPushMsgInfo(); // 上传按钮 $("#batchUploadBtn").attr(‘disabled‘, true); $("#showFieInfo").attr(‘disabled‘, true); $("#showInfo").text(‘‘); // 上传文件按钮点击的时候 $("#batchUploadBtn").click(function() { // 进度条归零 $("#progressBar").width("0%"); // 上传按钮禁用 $(this).attr(‘disabled‘, true); // 进度条显示 $("#progressBar").parent().show(); $("#progressBar").parent().addClass("active"); // 上传文件 UpladFile(); }) // 文件修改时 $("#batchFile") .change( function() { $("#batchUploadBtn").text( "数据文件已存在,请推送"); var processbar = $("#progressBar"); processbar.width("0%") processbar.text(‘‘); $("#showInfo").text(‘‘); var file = $(this).prop(‘files‘); if (file.length != 0) { $("#batchUploadBtn").attr( ‘disabled‘, false); } var fileObj = $("#batchFile") .get(0).files[0]; // js 获取文件对象 if (fileObj) { var fileSize = 0; if (fileObj.size > 1024 * 1024) { fileSize = (Math .round(fileObj.size / (1024 * 1024))) .toString() + ‘MB‘; } else { fileSize = (Math .round(fileObj.size / 1024)) .toString() + ‘KB‘; } console.log(fileObj.size) $("#upfileName").text( ‘文件名:‘ + fileObj.name); $("#upfileSize").text( ‘文件大小:‘ + fileSize); $("#upfileType").text( ‘文件类型:‘ + fileObj.type); $("#showFieInfo").attr( ‘disabled‘, false); } }); function UpladFile() { var fileObj = $("#batchFile").get(0).files[0]; // js 获取文件对象 console.log("上传的文件:" + fileObj); var FileController = base + "/upload"; // 接收上传文件的后台地址 // FormData 对象 var form = new FormData(); // form.append("author", "hooyes"); // 可以增加表单数据 form.append("file", fileObj); // 文件对象 // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); xhr.onload = function() { // ShowSuccess("上传完成"); //alert("上传完成"); $("#batchUploadBtn").attr(‘disabled‘, false); //$("#batchUploadBtn").text("上传"); $("#progressBar").parent().removeClass("active"); //$("#progressBar").parent().hide(); $("#batchUploadBtn").text("文件推送") //$(‘#myModal‘).modal(‘hide‘); }; xhr.upload.addEventListener("progress", progressFunction, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr .addEventListener("abort", uploadCanceled, false); xhr.send(form); } function progressFunction(evt) { var progressBar = $("#progressBar"); if (evt.lengthComputable) { var completePercent = Math.round(evt.loaded / evt.total * 100) + "%"; progressBar.width(completePercent); progressBar.text(completePercent); $("#batchUploadBtn").text( "文件推送中 " + completePercent); } } function formatDate(now) { var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var mill = now.getMilliseconds(); return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second+":"+mill; } function showPushMsgInfo() { var $table = $("#showPushInfo"); $.ajax({ url : "/showPushInfo", type : "get", async : true, success : function(result) { $table.html(""); $.each(result,function(index,item){ console.log(index) var $tr = $(‘<tr>‘); $.each(item,function(name,val){ if(name==‘generateTime‘) { val=formatDate(new Date(val)); } var $td = $(‘<td>‘).html(val); $tr.append($td); }); $table.append($tr); }); //$("#showPushInfo").text(JSON.stringify(result)) }, error : function(result) { $("#showInfo").text(‘获取推送信息产生异常:‘+JSON.stringify(result)); } }); } function uploadComplete(evt) { $("#showInfo").text(evt.target.responseText); showPushMsgInfo(); } function uploadFailed(evt) { $("#showInfo").text("上传失败,上传文件发生了错误:"+evt.target.responseText); } function uploadCanceled(evt) { $("#showInfo").text("上传取消,上传被用户取消或者浏览器断开连接:"+evt.target.responseText); } }); /*]]>*/ </script> </html>
原文地址:https://www.cnblogs.com/zincredible/p/9060663.html
时间: 2024-11-03 22:29:44