java實現頭像上傳


開發環境:jdk1.7,MyEclipse10 
框架用的是spring。用到了maven工具(maven的包百度下就可以)。

四步完成,全部復制改參數就可以

第一步:先在Spring中對圖片進行限制

<!-- SpringMVC上傳文件時,需要配置MultipartResolver處理器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8"/> <!-- 指定所上傳文件的總大小不能超過500KB。注意maxUploadSize屬性的限制不是針對單個文件,而是所有文件的容量之和。 這個的大小是以字節為單位的,要多大自己算好了再設置--> <property name="maxUploadSize" value="500000"/> <!-- 最大內存大小 (10240)--> <property name="maxInMemorySize" value="40960" /> </bean>

 

第二步:寫jsp頁面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>上傳圖片</title> </head> <body> <form action="filesUpload" method="POST" name="xiangmu" id="xiangmu" enctype="multipart/form-data"> <table> <tr> <td>身份證圖片上傳:</td> <td><input type=file name="myfiles" id="doc" onchange="showImage();"> </td> <div id="localImag"> <img id="preview" width=-1 height=-1 style="diplay:none" /> </div> </tr> <tr> <td>公司運營情況:</td> <!-- 為了實現張圖片上傳,上傳框這個name要都一樣 --> <td><input type="file" name="myfiles" id="doc1"></td> <td> </td> </tr> <tr> <td><input type="submit" value="提交" /> </td> </tr> </table> </form> </body> </html>

 

注意: 
多圖上傳,上傳框的name要都一樣,等於發送了一個MultipartFile[]數組。 
不僅支持上傳圖片,還支持多文件上傳。 
form的enctype=”multipart/form-data”,這個是上傳文件必須的。

第三步:如果你要實現頁面展現圖片的功能,就在jsp頁面添加下面的方法:

<script type="text/javascript"> function showImage() { var docObj = document.getElementById("doc"); var imgObjPreview = document.getElementById("preview"); if (docObj.files && docObj.files[0]) { //火狐下,直接設img屬性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '300px'; imgObjPreview.style.height = '120px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式獲取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } else { //IE下,使用濾鏡 docObj.select(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById("localImag"); //必須設置初始大小 localImagId.style.width = "250px"; localImagId.style.height = "200px"; //圖片異常的捕捉,防止用戶修改后綴來偽造圖片 try { localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch (e) { alert("您上傳的圖片格式不正確,請重新選擇!"); return false; } imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; } </script>

 

注意:這個方法只能上傳一張來顯示,除非你設置多個div。或者:展示多個圖片可以找找其他方法。

第四步:后台接收

@RequestMapping("/filesUpload") //requestParam要寫才知道是前台的那個數組 public String filesUpload(@RequestParam("myfiles") MultipartFile[] files, HttpServletRequest request) { List<String> list = new ArrayList<String>(); if (files != null && files.length > 0) { for (int i = 0; i < files.length; i++) { MultipartFile file = files[i]; // 保存文件 list = saveFile(request, file, list); } } //寫着測試,刪了就可以 for (int i = 0; i < list.size(); i++) { System.out.println("集合里面的數據" + list.get(i)); } return "index";//跳轉的頁面 } private List<String> saveFile(HttpServletRequest request, MultipartFile file, List<String> list) { // 判斷文件是否為空 if (!file.isEmpty()) { try { // 保存的文件路徑(如果用的是Tomcat服務器,文件會上傳到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夾中 // ) String filePath = request.getSession().getServletContext() .getRealPath("/") + "upload/" + file.getOriginalFilename(); list.add(file.getOriginalFilename()); File saveDir = new File(filePath); if (!saveDir.getParentFile().exists()) saveDir.getParentFile().mkdirs(); // 轉存文件 file.transferTo(saveDir); return list; } catch (Exception e) { e.printStackTrace(); } } return list; }

 

注意:upload是文件夾,自己新建下再運行,免得出錯。

結束,全部復制就可以實現了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM