SpringMVC批量上傳圖片，實現上傳前圖片預覽

近有個功能需要實現批量上傳圖片，然后實現圖片預覽，因為項目比較老，同時對界面和用戶操作體驗也要求不太高，就沒去找網上的開源插件，直接寫了個簡單的功能，這里做個記錄備份

因為這個是實驗性的小代碼，就沒做太多的驗證和界面調整

可以實現亂序刪除

這就是簡單的功能界面，下面就是代碼

首先是SpringMVC的xm需要配置下


    <!-- 配置MultipartResolver 用于文件上傳 使用spring的CommosMultipartResolver 說明： p:defaultEncoding="UTF-8"：這里設置默認的文件編碼為UTF-8，必須與用戶JSP的默認編碼一致； 
        p:maxUploadSize="5000000"：指定文件上傳大小，單位為字節； p:uploadTempDir="fileUpload/temp"：文件上傳臨時目錄，上傳完成后，就會將臨時文件刪除； -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
        p:defaultEncoding="UTF-8" p:maxUploadSize="5000000" p:uploadTempDir="fileUpload/temp">
    </bean>

JSP+js

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path=request.getContextPath();
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
response.setHeader("Cache-Control","no-store");//HTTP 1.1  
response.setHeader("Pragma","no-cache");//HTTP 1.0  
response.setDateHeader("Expires",0);//prevents caching at the proxy server  
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'batchFileUpload.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/css/webuploader.css"/>
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.json-2.4.js" charset="UTF-8"></script> 
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.validate.js"></script> 
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.Jcrop.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/webuploader.nolog.js"></script>
    
    <script type="text/javascript">
        $(function(){
            //動態打開file標簽
            $("#changeImg").click(function(){
                var files=document.getElementsByName("file");
                for(var i=0;i<files.length;i++)
                {
                    if($(files[i]).val()=='')
                    {
                        $(files[i]).click();
                        break;
                    }
                }
            });
        }); 
        
        //預覽圖事件
        function readURL(preFile,markId){
            var reader=new FileReader();
            reader.readAsDataURL(preFile.files[0]); 
            reader.onload=function(e){
                //循環判斷為空
                var preImges=document.getElementsByName("preImg");
                for(var i=0;i<preImges.length;i++){
                    if($(preImges[i]).attr("src")==''){
                        $(preImges[i]).removeAttr("src");
                        $(preImges[i]).removeAttr("markId");
                        $(preImges[i]).attr("src",e.target.result);
                        $(preImges[i]).attr("markId",markId);
                        break;
                    }
                }

                
            }
            
        }
    
        //刪除預覽圖事件
        function deletePre(preId){
            $("#"+preId).removeAttr("src");
            $("#"+preId).attr("src",'');
            var tempMark=$("#"+preId).attr("markId");
            $("#"+tempMark).val('');
        }
    </script>

  </head>
  
  <body>
    <div style="margin-left: 35%;margin-top: 10%">
        <div  style="margin-left:5%;margin-top: 10%">簡單的照片預覽與批量上傳</div>
        <form action=""  method="post" enctype="multipart/form-data" id="imgFile">
            <table cellpadding="10px" cellspacing="10px">
                <tbody>
                    <tr>
                        <td>用戶名：</td>
                        <td><input id="userName" name="userName" type="text"></td>
                        <td> </td>
                    </tr>               
                    <tr>
                        <td>相冊：</td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td><img alt="相片1" src="" style="width: 100px" id="preImg_1" name="preImg"><a href="javascript：void(0);"onclick="deletePre('preImg_1')">刪除</a></td>
                        <td><img alt="相片2" src="" style="width: 100px" id="preImg_2" name="preImg"><a href="javascript：void(0);"onclick="deletePre('preImg_2')">刪除</a></td>
                        <td><img alt="相片3" src="" style="width: 100px" id="preImg_3" name="preImg"><a href="javascript：void(0);"onclick="deletePre('preImg_3')">刪除</a></td>
                    </tr>
                </tbody>
            </table>
            <div  style="margin-left:8%;margin-top:5%">
                <input type="button" value="選擇圖片" id="changeImg">  <input type="submit" value="     提  交     ">
            </div>
            <div>
                <span>實際提交相片的File組件</span><br>
                <br><br>
                <input type="file" id="fileId_1" name="file" onchange="readURL(this,'fileId_1')">
                <input type="file" id="fileId_2" name="file" onchange="readURL(this,'fileId_2')">
                <input type="file" id="fileId_3" name="file" onchange="readURL(this,'fileId_3')">
            </div>
        </form>
    
    </div>
  </body>
</html>

后臺代碼

package com.lovo.controller;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.lovo.utils.FileUploadCheck;

@Controller
public class batchImgController {

    private static Logger logger=Logger.getLogger(batchImgController.class);
    
    @RequestMapping(value="/batchImg.do",method=RequestMethod.GET)
    public String batchImgGet(){
        //get方法，處理jsp跳轉前的一些驗證和準備
        
        return "batchFileUpload";
        
    }
    
    /**
     * 圖片批量提交方法
     * @param userName
     * @param file
     * @return
     */
    @RequestMapping(value="/batchImg.do",method=RequestMethod.POST)
    public String batchImgPost(@RequestParam("userName") String userName,@RequestParam("file")MultipartFile[] file ,HttpServletRequest request){
        
        //表單基本信息
        System.out.println(userName);
        
        // 文件保存路徑  
        String filePath=request.getSession().getServletContext().getRealPath("/") + "fileUpload/";
        //儲存文件名或文件路徑
        List<String> imgNameList=new ArrayList<String>();
        
        try {
            for (MultipartFile img : file)
            {
                if(!img.isEmpty())
                {
                    //文件重命名
                    Date day=new Date();
                    SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMdd");
                    String newName=sdf.format(day)+System.currentTimeMillis()+".jpg";
                    
                    //方法判定是否為圖片
                    if(FileUploadCheck.allowUpload(img.getContentType()))
                    {
                        img.transferTo(new File(filePath+newName));
                        
                        //存儲文件的新名字，之后根據項目情況對文件進行入庫，并把實體文件上傳到FTP
                        imgNameList.add(newName);
                    }
                    
                }
            }
        } catch (Exception e) {
            logger.error("文件上傳失敗");
        }
        
        return "batchFileUpload";
        
    };
}

工具類

pring MVC 的請求處理流程

DispatcherServlet

DispatcherServlet繼承結構

DispatcherServlet對請求的處理流程

大致步驟

綁定?些 Attribute

WebApplicationContext / LocaleResolver / ThemeResolver

處理 Multipart

如果是，則將請求轉為 MultipartHttpServletRequest

Handler 處理

如果找到對應 Handler，執? Controller 及前后置處理器邏輯

處理返回的 Model ，呈現(render)視圖

具體可以參見DispatcherServlet#doService(...)和DispatcherServlet#doDispatch(...)方法

如何定義處理?法（即Handler方法）

定義映射關系

@Controller
@RequestMapping

value: 指定請求的實際地址，比如 /action/info之類
method：指定請求的method類型， GET、POST、PUT、DELETE等
consumes：指定處理請求的提交內容類型（Content-Type），例如application/json, text/html;
produces: 指定返回的內容類型，僅當request請求頭中的(Accept)類型中包含該指定類型才返回
params：指定request中必須包含某些參數值是，才讓該方法處理
headers：指定request中必須包含/不包含某些指定的header值，才能讓該方法處理請求

@RestController
@GetMapping / @PostMapping / @PutMapping / @DeleteMapping / @PatchMapping

定義處理?法

@RequestBody / @ResponseBody / @ResponseStatus（用于改變HTTP響應的狀態碼）
@PathVariable / @RequestParam / @RequestHeader

通過@PathVariable 可以將URL中占位符參數{xxx}綁定到處理器類的方法形參中@PathVariable(“xxx“)
@RequestParam標注在接口的方法參數上，被標注的參數的值來源于request.getParameter或request.getParameterValues
@RequestHeader注解，能夠將請求頭中的變量值映射到控制器的參數中。

HttpEntity / RequestEntity / ResponseEntity

HttpEntity表示http的request和resposne實體，它由消息頭和消息體組成。從HttpEntity中可以獲取http請求頭和回應頭，也可以獲取http請求體和回應體信息。HttpEntity的典型應用是配合RestTemplate。

詳細參數

https://docs.spring.io/spring-framework/docs/5.1.5.RELEASE/spring-framework-reference/web.html#mvc-ann-arguments

詳細返回

https://docs.spring.io/spring-framework/docs/5.1.5.RELEASE/spring-framework-reference/web.html#mvc-ann-return-types

?法示例

定義類型轉換

SpringBoot的默認實現

在WebMvcAutoConfiguration的內部類WebMvcAutoConfigurationAdapter中實現了重寫WebMvcConfigurer接口這樣一個方法。

addFormatters方法用于添加默認的{@link Converter Converter}和{@link Formatter Formatters}到注冊中心。

ApplicationConversionService#addBeans(...)方法

Converter和Formatter的異同

兩者的作用一樣，都是類型轉換。

org.springframework.format.Formatter只能做String類型到其他類型的轉換。

org.springframework.core.convert.converter.Converter可以做任意類型的轉換。

??實現 WebMvcConfigurer

添加?定義的 Converter
添加?定義的 Formatter

定義校驗

通過 Validator 對綁定結果進?校驗

Hibernate Validator

@Valid、@Validated注解及自定義注解校驗
BindingResult （對于不希望Spring MVC來介入我的Valid失敗后的操作，可以通過BindingResult實現）

Multipart 上傳

配置 MultipartResolver

Spring Boot ?動配置 MultipartAutoConfiguration

?持類型 multipart/form-data
MultipartFile 類型

一些誤區/注意點

@RequestParam注解能讀取請求體里的內容嗎？

@RequestParam：In Spring MVC, "request parameters" map to query parameters, form data, and parts in multipart requests.

有時候我們只想取出請求body里面的部分內容，但@RequstBody注解是把整個請求的Body傳給參數，而RequestParam是可以把Body里的對應部分取出來傳給參數。

controller里面可以實現傳多個對象么？比如：hello(Student student, Teacher teacher)

注意：@RequestBody只能將一個請求報文體轉成一個復雜對象。

將多個對象合成一個中間復雜對象，之后再拆開。
通過 Map 或者Jackson 的 ObjectNode
自定義注解，并將它注冊到 Spring MVC

TML 幫助器用于修改 HTML 輸出。

HTML 幫助器

通過 MVC，HTML 幫助器類似于傳統的 ASP.NET Web Form 控件。

就像 ASP.NET 中的 Web Form 控件，HTML 幫助器用于修改 HTML。但是 HTML 幫助器是更輕量級的。與 Web Form 控件不同，HTML 幫助器沒有事件模型和視圖狀態。

在大多數情況下，HTML 幫助器僅僅是一個返回字符串的方法。

通過 MVC，您可以創建您自己的幫助器，或者直接使用內建的 HTML 幫助器。

標準的 HTML 幫助器

MVC 包含了大多數常用的 HTML 元素類型的標準幫助器，比如 HTML 鏈接和 HTML 表單元素。

HTML 鏈接

呈現 HTML 鏈接的最簡單的方法是使用 HTML.ActionLink() 幫助器。

通過 MVC，Html.ActionLink() 不連接到視圖。它創建一個連接到控制器操作。

Razor 語法：

@Html.ActionLink("About this Website", "About")

ASP 語法：

<%=Html.ActionLink("About this Website", "About")%>

第一個參數是鏈接文本，第二個參數是控制器操作的名稱。

上面的 Html.ActionLink() 幫助器，輸出以下的 HTML：

<a href="/Home/About">About this Website</a>

Html.ActionLink() 幫助器的一些屬性：

屬性	描述
.linkText	URL 文本（標簽），定位點元素的內部文本。
.actionName	操作（action）的名稱。
.routeValues	傳遞給操作（action)的值，是一個包含路由參數的對象。
.controllerName	控制器的名稱。
.htmlAttributes	URL 的屬性設置，是一個包含要為該元素設置的 HTML 特性的對象。
.protocol	URL 協議，如 "http" 或 "https"。
.hostname	URL 的主機名。
.fragment	URL 片段名稱（定位點名稱）。

注釋：您可以向控制器操作傳遞值。例如，您可以向數據庫 Edit 操作傳遞數據庫記錄的 id：

Razor 語法 C#：

@Html.ActionLink("Edit Record", "Edit", new {Id=3})

Razor 語法 VB：

@Html.ActionLink("Edit Record", "Edit", New With{.Id=3})

上面的 Html.ActionLink() 幫助器，輸出以下的 HTML：

<a href="/Home/Edit/3">Edit Record</a>

HTML 表單元素

以下 HTML 幫助器可用于呈現（修改和輸出）HTML 表單元素：

BeginForm()
EndForm()
TextArea()
TextBox()
CheckBox()
RadioButton()
ListBox()
DropDownList()
Hidden()
Password()

ASP.NET 語法 C#：

<%=Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

<% using (Html.BeginForm()){%>

<label for="FirstName">First Name:</label>

<%=Html.TextBox("FirstName") %>

<%=Html.ValidationMessage("FirstName", "*") %>

<%=Html.TextBox("LastName") %>

<%=Html.ValidationMessage("LastName", "*") %>

<label for="Password">Password:</label>

<%=Html.Password("Password") %>

<%=Html.ValidationMessage("Password", "*") %>

<label for="Password">Confirm Password:</label>

<%=Html.Password("ConfirmPassword") %>

<%=Html.ValidationMessage("ConfirmPassword", "*") %>

<label for="Profile">Profile:</label>

<%=Html.TextArea("Profile", new {cols=60, rows=10})%>

<%=Html.CheckBox("ReceiveNewsletter") %>

<label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label>

<%}%>

在線咨詢

上一篇：個人必用網站，建議收藏使用，超級經典（50個）
下一篇：5個小巧的CSS技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商