企业官网建设流程全解析

深圳哪里有网站建设,如何做网站优化seo,青岛做网站公司有哪些,烟台网站建设外贸5.3.1文件上传 开发Web应用时#xff0c;文件上传是很常见的一个需求浏览器通过表单形式将文件以流的形式传递给服务器#xff0c;服务器再对上传的数据解析处理。下面我们通过一个案例讲解如何使用SpringBoot实现文件上传#xff0c;具体步骤如下。 1.编写文件上传的表单…5.3.1文件上传开发Web应用时文件上传是很常见的一个需求浏览器通过表单形式将文件以流的形式传递给服务器服务器再对上传的数据解析处理。下面我们通过一个案例讲解如何使用SpringBoot实现文件上传具体步骤如下。1.编写文件上传的表单页面在chapter05项目根路径下的templates 模板引擎文件夹下创建一个用来上传文件的upload.html模板页面内容如下列代码所示。!DOCTYPE html html langenxmlns:thhttp://www.thymeleaf.org head meta charsetUTF-8 meta http-equivContent-Type content“text/html; charsetUTF-8” title动态添加文件上传列表/title link th:href{/login/css/bootstrap.min.css} relstylesheet script th:src{/login/js/jquery.min.js}/script /head body div th:if${uploadStatus} stylecolor: red th:text${uploadStatus} 上传成功/div form th:action{/uploadFile}methodpost enctypemultipart/form-data 上传文件:nbsp;nbsp;input typebuttonvalue添加文件onclickadd()/ div id-file stylemargin-top10px;th:value文件上传区域 /div input idsubmit typesubmit value上传 styledisplay: none;margin-top: 10px;/ /form script typetext/javascript //动态添加上传按钮 function add(){ var innerdiv div; innerdiv input typefile namefileUpload requiredrequired input typebutton value-删除’ onclickremove(this); innerdiv /div; $(#file).append(innerdiv); //打开上传按钮 $(#submit).css(displayblock); } //删除当前行div function remove (obj) { $(obj).parent().remove(); if($(#file div).length 0){ $(#submit).css(display,none); } } /script /body /html在上述代码中第1318行代码的form标签用于创建上传文件的表单。第1937行是一段JavaScript脚本代码用来处理用户动态添加或者移除上传输入框。另外在文件5-11中第8行代码还引入了静态资源目录下的login/js中的jquery.min.js文件因此这里需要在项目resources/static/login 目录下创建一个 js 文件夹并引入jquery.min.js文件。2.在全局配置文件中添加文件上传的相关配置在全局配置文件 application.properties 中添加文件上传的相关设置内容如下列代码所示。# thymeleaf 页面缓存设置默认为true)开发中为方便调试应设置为false上线稳定后应保持默认true spring.thymeleaf.cachefalse # 配置国际化文件基础名 spring.messages.basenamei18n.login # 单个上传文件大小限制默认为1MB spring.servlet.multipart.max-file-size10MB # 总上传文件大小限制默认为10MB spring.servlet.multipart.max-request-size50MB在上述代码中在项目全局配置文application.properties已有配置的基础上对文件上传过程中的上传大小进行了设置。其中spring.servlet.multipart.max-file-size用来设置单个上传文件的大小限制默认值为1MB上述文件设置为10MBspring.servlet.multipart.maxrequest-size 用来设置所有上传文件的大小限制默认值为10MB这里设置为50MB。如果上传文件的大小超出限制会提示“FileUploadBaseyFileSizeLimitExceededException:The field fleUpload exceeds its maximum permitted size of 1048576 bytes异常信息因此开发者需要结合实际需求合理设置文件大小。3.进行文件上传处理实现文件上传功能在之前创建的com.itheima.controller 包下创建一个管理文件上传下载的控制类FileController用于实现文件上传功能内容如下列代码所示。import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.util.UUID; /** *文件管理控制类 */ Controller public class FileController // 向文件上传页面跳转 GetMapping(/toupload) public String toupload(){ return upload; } //文件上传管理 PostMapping(/uploadFile) public String uploadFile (MultipartFile[] fileupload, Model model){ //默认文件上传成功并返回状态信息 model.addattribute(uploadStatus“上传成功); for (MultipartFile file : fileUpload) { // 获取文件名以及后级名 String fileName file.getOriginalFilename(); // 重新生成文件名根据具体情况生成对应文件名 fileName UUID.randomUUID()fileName; // 指定上传文件本地存储目录不存在则需要提前创建 String dirPath F:/file/; File filePath new File(dirPath); if(!filePath.exists()){ filePath.mkdirs(); } try { file.transferTo(new File(dirPathfileName)) } catch (Exception e) { e.printStackTrace(); //上传失败返回失败信息 model.addAttribute(uploadstatus,上传失败e.getMessage()); } } //携带上传状态信息回调到文件上传贞面 return upload; } }文件5-13中toUpload()方法用于处理路径为“/toUpload”的GET请求并返回上传页面的路径。uploadFile()方法用于处理路径为“/uploadFile”的POST请求如果文件上传成功,则会将上传的文件重命名并存储在“F/ile/”目录。如果上传失败则会提示上传失败的相关信息。需要注意的是uploadFile()方法的参数fileUpload 的名称必须与上传页面中的name 值一致。4.效果测试启动项目项目启动成功后在浏览器上访问“http:/localhost-8080/oUpload效果如图5-18所示。单击图5-13所示窗口中的【添加文件】按钮能够动态添加多个文件效果如图5-14所示。在图5-14所示的文件上传页面中共添加了3个上传的文件每个上传文件后方对应一个【删除】按钮用于移除上传的文件。单击文件上传页面的【上传】按钮如果存在未选择的文件会提示“请选择一个文件”否则选择好的上传文件会进行上传处理效果如图5-15所示。从图5-15可以看出文件上传成功后页面会提示“上传成功”。为了验证文件上传效果打开上传文件的存储目录“F:/ile/”效果如图5-16所示。从图5-16可以看出在定制的上传文件存储目录“F:/ile/”下出现了选择上传的3个不同类型的文件同时文件名也根据设置进行了相应的修改读者还可以打开每个文件查看具体的文件内容。