SpringMVC批量上傳圖片，實(shí)現(xiàn)上傳前圖片預(yù)覽

近有個(gè)功能需要實(shí)現(xiàn)批量上傳圖片，然后實(shí)現(xiàn)圖片預(yù)覽，因?yàn)轫?xiàng)目比較老，同時(shí)對(duì)界面和用戶操作體驗(yàn)也要求不太高，就沒去找網(wǎng)上的開源插件，直接寫了個(gè)簡單的功能，這里做個(gè)記錄備份

因?yàn)檫@個(gè)是實(shí)驗(yàn)性的小代碼，就沒做太多的驗(yàn)證和界面調(diào)整

可以實(shí)現(xiàn)亂序刪除

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

首先是SpringMVC的xm需要配置下


    <!-- 配置MultipartResolver 用于文件上傳 使用spring的CommosMultipartResolver 說明： p:defaultEncoding="UTF-8"：這里設(shè)置默認(rèn)的文件編碼為UTF-8，必須與用戶JSP的默認(rèn)編碼一致； 
        p:maxUploadSize="5000000"：指定文件上傳大小，單位為字節(jié)； p:uploadTempDir="fileUpload/temp"：文件上傳臨時(shí)目錄，上傳完成后，就會(huì)將臨時(shí)文件刪除； -->
    <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(){
            //動(dòng)態(tài)打開file標(biāo)簽
            $("#changeImg").click(function(){
                var files=document.getElementsByName("file");
                for(var i=0;i<files.length;i++)
                {
                    if($(files[i]).val()=='')
                    {
                        $(files[i]).click();
                        break;
                    }
                }
            });
        }); 
        
        //預(yù)覽圖事件
        function readURL(preFile,markId){
            var reader=new FileReader();
            reader.readAsDataURL(preFile.files[0]); 
            reader.onload=function(e){
                //循環(huán)判斷為空
                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;
                    }
                }

                
            }
            
        }
    
        //刪除預(yù)覽圖事件
        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%">簡單的照片預(yù)覽與批量上傳</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>實(shí)際提交相片的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>

后臺(tái)代碼

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跳轉(zhuǎn)前的一些驗(yàn)證和準(zhǔn)備
        
        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/";
        //儲(chǔ)存文件名或文件路徑
        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));
                        
                        //存儲(chǔ)文件的新名字，之后根據(jù)項(xiàng)目情況對(duì)文件進(jìn)行入庫，并把實(shí)體文件上傳到FTP
                        imgNameList.add(newName);
                    }
                    
                }
            }
        } catch (Exception e) {
            logger.error("文件上傳失敗");
        }
        
        return "batchFileUpload";
        
    };
}

工具類

pring MVC 的請求處理流程

DispatcherServlet

DispatcherServlet繼承結(jié)構(gòu)

DispatcherServlet對(duì)請求的處理流程

大致步驟

綁定?些 Attribute

WebApplicationContext / LocaleResolver / ThemeResolver

處理 Multipart

如果是，則將請求轉(zhuǎn)為 MultipartHttpServletRequest

Handler 處理

如果找到對(duì)應(yīng) Handler，執(zhí)? Controller 及前后置處理器邏輯

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

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

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

定義映射關(guān)系

@Controller
@RequestMapping

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

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

定義處理?法

@RequestBody / @ResponseBody / @ResponseStatus（用于改變HTTP響應(yīng)的狀態(tài)碼）
@PathVariable / @RequestParam / @RequestHeader

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

HttpEntity / RequestEntity / ResponseEntity

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

詳細(xì)參數(shù)

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

詳細(xì)返回

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

?法示例

定義類型轉(zhuǎn)換

SpringBoot的默認(rèn)實(shí)現(xiàn)

在WebMvcAutoConfiguration的內(nèi)部類WebMvcAutoConfigurationAdapter中實(shí)現(xiàn)了重寫WebMvcConfigurer接口這樣一個(gè)方法。

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

ApplicationConversionService#addBeans(...)方法

Converter和Formatter的異同

兩者的作用一樣，都是類型轉(zhuǎn)換。

org.springframework.format.Formatter只能做String類型到其他類型的轉(zhuǎn)換。

org.springframework.core.convert.converter.Converter可以做任意類型的轉(zhuǎn)換。

??實(shí)現(xiàn) WebMvcConfigurer

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

定義校驗(yàn)

通過 Validator 對(duì)綁定結(jié)果進(jìn)?校驗(yàn)

Hibernate Validator

@Valid、@Validated注解及自定義注解校驗(yàn)
BindingResult （對(duì)于不希望Spring MVC來介入我的Valid失敗后的操作，可以通過BindingResult實(shí)現(xiàn)）

Multipart 上傳

配置 MultipartResolver

Spring Boot ?動(dòng)配置 MultipartAutoConfiguration

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

一些誤區(qū)/注意點(diǎn)

@RequestParam注解能讀取請求體里的內(nèi)容嗎？

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

有時(shí)候我們只想取出請求body里面的部分內(nèi)容，但@RequstBody注解是把整個(gè)請求的Body傳給參數(shù)，而RequestParam是可以把Body里的對(duì)應(yīng)部分取出來傳給參數(shù)。

controller里面可以實(shí)現(xiàn)傳多個(gè)對(duì)象么？比如：hello(Student student, Teacher teacher)

注意：@RequestBody只能將一個(gè)請求報(bào)文體轉(zhuǎn)成一個(gè)復(fù)雜對(duì)象。

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

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

HTML 幫助器

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

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

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

通過 MVC，您可以創(chuàng)建您自己的幫助器，或者直接使用內(nèi)建的 HTML 幫助器。

標(biāo)準(zhǔn)的 HTML 幫助器

MVC 包含了大多數(shù)常用的 HTML 元素類型的標(biāo)準(zhǔn)幫助器，比如 HTML 鏈接和 HTML 表單元素。

HTML 鏈接

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

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

Razor 語法：

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

ASP 語法：

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

第一個(gè)參數(shù)是鏈接文本，第二個(gè)參數(shù)是控制器操作的名稱。

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

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

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

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

注釋：您可以向控制器操作傳遞值。例如，您可以向數(shù)據(jù)庫 Edit 操作傳遞數(shù)據(jù)庫記錄的 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 幫助器可用于呈現(xiàn)（修改和輸出）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>

<%}%>

在線咨詢

上一篇：個(gè)人必用網(wǎng)站，建議收藏使用，超級(jí)經(jīng)典（50個(gè)）
下一篇：5個(gè)小巧的CSS技巧

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商