java實現(xiàn)多圖片上傳功能

更新時間：2019年08月23日 16:21:44 作者：齊天二圣

這篇文章主要為大家詳細(xì)介紹了java多圖片同步上傳功能的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了java實現(xiàn)多圖片上傳功能的具體代碼，供大家參考，具體內(nèi)容如下

開發(fā)環(huán)境：jdk1.7，MyEclipse10
框架用的是spring。用到了maven工具（maven的包百度下就可以）。

四步完成，全部復(fù)制改參數(shù)就可以

第一步：先在Spring中對圖片進(jìn)行限制

<!-- SpringMVC上傳文件時，需要配置MultipartResolver處理器 -->
 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="UTF-8"/> 
<!-- 指定所上傳文件的總大小不能超過500KB。注意maxUploadSize屬性的限制不是針對單個文件，而是所有文件的容量之和。
這個的大小是以字節(jié)為單位的，要多大自己算好了再設(shè)置-->
   <property name="maxUploadSize" value="500000"/>
   <!-- 最大內(nèi)存大小 (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>
  <!-- 為了實現(xiàn)張圖片上傳，上傳框這個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要都一樣，等于發(fā)送了一個MultipartFile[]數(shù)組。
不僅支持上傳圖片，還支持多文件上傳。
form的enctype=“multipart/form-data”，這個是上傳文件必須的。

第三步：如果你要實現(xiàn)頁面展現(xiàn)圖片的功能，就在jsp頁面添加下面的方法：

<script type="text/javascript">
 function showImage() {
 var docObj = document.getElementById("doc");
 var imgObjPreview = document.getElementById("preview");
 if (docObj.files && docObj.files[0]) {
  //火狐下，直接設(shè)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");
  //必須設(shè)置初始大小 
  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>

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

第四步：后臺接收

@RequestMapping("/filesUpload")
 //requestParam要寫才知道是前臺的那個數(shù)組
 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("集合里面的數(shù)據(jù)" + list.get(i));
 }
 return "index";//跳轉(zhuǎn)的頁面
 }

 private List<String> saveFile(HttpServletRequest request,
  MultipartFile file, List<String> list) {
 // 判斷文件是否為空
 if (!file.isEmpty()) {
  try {
  // 保存的文件路徑(如果用的是Tomcat服務(wù)器，文件會上傳到\\%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();

  // 轉(zhuǎn)存文件
  file.transferTo(saveDir);
  return list;
  } catch (Exception e) {
  e.printStackTrace();
  }
 }
 return list;
 }

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

結(jié)束，全部復(fù)制就可以實現(xiàn)了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: