javascript
SpringMVC学习系列(六)------图片的上传
前言
????在表單數據中,我們可能會遇到頭像、照片等圖片的上傳等需求,那么如果表單中包含一個圖片元素,我們在controller中應該如何接收呢?
正文
????在實際的項目中,我們通常都會有專門的圖片服務器來存儲圖片,這里我們為了簡單,直接使用自己的本地目錄來虛擬一個圖片路徑,只要能達到圖片上傳的目的就行。我們使用tomcat的虛擬目錄來實現:
????在tomcat目錄下的conf/server.xml中添加:<Context docBase="本地目錄" path="/pic" reloadable="false"/>,配置了如上的虛擬目錄后,訪問http://localhost:8080/pic就可以訪問配置的本地目錄下的圖片。
????要實現文件上傳,要再pom文件中添加以下依賴:
其次還要再springmvc.xml文件中配置多媒體解析器:
<!-- 配置多媒體文件解析器 --><!-- 文件上傳 --><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!-- 設置上傳文件的最大尺寸為5MB --><property name="maxUploadSize"><value>5242880</value></property></bean>我們在原來的登錄頁面的jsp中加入一個文件上傳的input:
<form action="${pageContext.request.contextPath }/fileupload.action" enctype="multipart/form-data" method="post">賬號:<input type="text" name="username">密碼:<input type="password" name="password"><br/>自定義日期格式數據測試:<input type="text" name="texttime" value="<fmt:formatDate value='${texttime}' pattern='yyyy-MM-dd HH:mm:ss'/>"/> <h3>${data}</h3><input type="file" name="picFile"><input type="submit" value="登錄"></form>**需要注意的是,如果要使用文件上傳的功能,form表單必須有一個enctype="multipart/form-data"屬性,且表單的提交方式為post,這樣子在點擊登錄按鈕的時候,表單會提交到后臺controller的方法中:
@RequestMapping("/fileupload")public String uploadPic(MultipartFile picFile, Model model) throws Exception {//生成新的文件名String picName = UUID.randomUUID().toString();//擴展名String oriName = picFile.getOriginalFilename();String extName = oriName.substring(oriName.lastIndexOf("."));//保存文件picFile.transferTo(new File("F:\\temp\\" + picName + extName));model.addAttribute("picName", picName + extName);return "/WEB-INF/jsp/success.jsp";}可以看到,在這里我們如果想要接受頁面的圖片,要使用MultipartFile這個對象來接收,且屬性名要和前臺input的屬性名稱一致。在這個方法中,我們生成了一個新的文件名,并將其放在本地目錄下,最后返回了一個success的jsp頁面,并在model中將新圖片的名稱攜帶了過去。在success。jsp中是這樣取值的：
<body><h1>圖片保存成功</h1><input type="image" src="/pic/${picName}"> </body>這里直接將圖片名取出來，在一個圖片input文本框中顯示出來。
圖片正常顯示，說明我們的文件上傳成功，而在本地目錄下，也保存了剛才上傳的圖片。
總結
????在本文中對SpringMVC的圖片上傳的功能做了一個簡述，在實際的工作中，使用七牛云等圖片服務器將會更加方便的實現圖片的管理和存儲。
總結
以上是生活随笔為你收集整理的SpringMVC学习系列(六)------图片的上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数学笔记总结
- 下一篇： JavaScript原型Prototyp