• jsp+springmvc实现文件上传、图片上传和及时预览图片

    1、多文件上传：http://blog.csdn.net/a1314517love/article/details/24183273

    2、单文件上传的简单示例：http://blog.csdn.net/cheung1021/article/details/7084673

    3、springMVC+ajaxfileupload异步上传图片并及时预览

    http://www.codeweblog.com/springmvc-ajaxfileupload%E5%BC%82%E6%AD%A5%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88-%E8%A3%81%E5%89%AA%E5%B9%B6%E4%BF%9D%E5%AD%98%E5%9B%BE%E7%89%87/

    个人实践：

    一、对1中的第二种方法的实现：

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${pageTitle }</title>
<link href="/Public/media/css/new/page.css" rel="stylesheet"
    type="text/css" />
</head>
<body>

<form action="${pageContext.request.contextPath}/workConfig/upload" method="post" enctype="multipart/form-data">
name:<input name="name" type="text" ><br />
<input name="file" type="file" ><br />
<input name="file2" type="file" ><br />
<input name="file3" type="file" ><br />
<input name="file4" type="file" ><br />
    <input type="submit" value="提交">
</form>
</body>
</html>
    package com.leslie.controller;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.ModelAndView;

import com.leslie.User;

@Controller
@RequestMapping("/workConfig")
public class SJWorkConfigController {

    private Logger log = LoggerFactory.getLogger(SJWorkConfigController .class);


    @RequestMapping(value = "/upload")
    public ModelAndView upload(@Valid @ModelAttribute User user, BindingResult br, HttpServletRequest request,
            HttpServletResponse response) throws IllegalStateException, IOException {
        // 创建一个通用的多部分解析器
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
                request.getSession().getServletContext());
        // 判断 request 是否有文件上传,即多部分请求
        if (multipartResolver.isMultipart(request)) {
            // 转换成多部分request
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            // 取得request中的所有文件名
            Iterator<String> iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                // 记录上传过程起始时的时间，用来计算上传时间
                // int pre = (int) System.currentTimeMillis();
                // 取得上传文件
                MultipartFile file = multiRequest.getFile(iter.next());
                if (file != null) {
                    // 取得当前上传文件的文件名称
                    String myFileName = file.getOriginalFilename();
                    // 如果名称不为“”,说明该文件存在，否则说明该文件不存在
                    if (myFileName.trim() != "") {
                        System.out.println(myFileName);
                        // 重命名上传后的文件名
                        String fileName = "demoUpload" + file.getOriginalFilename();
                        // 定义上传路径
                        String path = "E:/test/" + fileName;
                        File localFile = new File(path);
                        file.transferTo(localFile);
                    }
                }
                // 记录上传该文件后的时间
                // int finaltime = (int) System.currentTimeMillis();
                // System.out.println(finaltime - pre);
            }

        }
        ModelAndView mv = new ModelAndView();
        mv.addObject("message", request.getParameter("name").toString());
        mv.setViewName("hello");
        return mv;
    }

    // @RequestMapping(value = "/upload")
    // public ModelAndView upload(DefaultMultipartHttpServletRequest request) {
    // CommonsMultipartFile file = (CommonsMultipartFile)
    // request.getFile("file");
    // // 这里的file就是前台页面的name
    // if (file.isEmpty()) {
    // return null;
    // }
    // // 获取路径，生成完整的文件路径
    // String fileName = "E:/test/"+"demoUpload" + file.getOriginalFilename();
    // File uploadFile = new File(fileName);
    // try {
    // // 上传
    // FileCopyUtils.copy(file.getBytes(), uploadFile);
    // } catch (IOException e) {
    // e.printStackTrace();
    // }
    // ModelAndView mv = new ModelAndView();
    // mv.addObject("message",request.getParameter("name").toString());
    // mv.setViewName("hello");
    // return mv;
    // }
}

    1、1中的方法比较通用，且一次能上传多个文件。

    2、虽然request的类型是MultipartHttpServletRequest，但仍可继续使用request.getParameter来正常取表单中的非Multipart内容，

    这样就可以将图片和普通表单内容一次提交了。

    二、对3中方法的实现

    注：3文中不但实现了图片上传和预览，并且有使用js切图的功能。由于我使用java在后台切图，所以只使用了它的文件上传预览功能。

    前台页面代码：

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${pageTitle }</title>
<link href="/Public/media/css/new/page.css" rel="stylesheet"
    type="text/css" />
<style type="text/css">
.errormsg {
    font-family: "微软雅黑";
    color: #F30;
}
</style>

</head>
<body>
    <div class="outer">
        <div class="pathdiv">
            ${currentMenuDesc }
            <div class="tableDivTitleButtonDiv">
                <a href="${backToURL}"><input type="button"
                    class="tableDivTitleButtonDivButton" value="返回" /></a>
            </div>

        </div>
        <div class="infoTitle">${pageTitle }</div>

        <form:form action="${formActionURL}" method="post" commandName="work">
            <div class="formDiv">
                <table width="1020" border="0">
                    <tr>
                        <form:input path="worksId" type="hidden" />
                        <form:input path="designerId" type="hidden" />
                        <form:input path="worksImg1" type="hidden" />
                        <form:input path="worksImg2" type="hidden" />
                        <form:input path="worksImg3" type="hidden" />
                        <td align="right">作品名称：</td>
                        <td align="left"><form:input path="worksName" /><span
                            class="errormsg"><form:errors path="worksName" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">作品说明：</td>
                        <td align="left"><form:textarea path="worksRemark" cols="30"
                                rows="10" /><span class="errormsg"><form:errors
                                    path="worksRemark" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">作品图1：</td>
                        <td align="left">
                            <input name="realPicFile" id="realPicFile" type="file" onchange="ajaxFileUpload()"/>
                            <img src="/Public/media/image/loading2.gif" id="loading" style="display: none;">
                            <img id="realPic" src="/Public/showimgbj.jpg"/>
                            <span class="errormsg">
                                <form:errors path="worksImg1" />
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">作品图2：</td>
                        <td align="left"><input name="" type="file" /><img id="img2"
                            src="" /><span class="errormsg"><form:errors
                                    path="worksImg2" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">作品图3：</td>
                        <td align="left"><input name="" type="file" /><img id="img3"
                            src="" /><span class="errormsg"><form:errors
                                    path="worksImg3" /></span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input name="" type="submit" value="提交" /></td>
                    </tr>

                </table>
            </div>
        </form:form>
    </div>
    <div id="errorMsgDiv"></div>
    <script src="/Public/media/js/jquery-1.10.1.min.js"
        type="text/javascript"></script>
    <script src="/Public/media/js/jquery-migrate-1.2.1.min.js"
        type="text/javascript"></script>
    <script src="/Public/media/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/Public/media/js/jquery.gritter.js" type="text/javascript"></script>
    <script src="/Public/media/js/app.js" type="text/javascript"></script>
    <script src="/Public/media/css/new/ajaxfileupload.js"
        type="text/javascript"></script>
    <script>
        jQuery(document).ready(function() {
            App.init(); // initlayout and core plugins
        });
    </script>
    <script>
    function ajaxFileUpload() {
        var file = $("#realPicFile").val();
        if(!/.(gif|jpg|jpeg|png|JPG|PNG)$/.test(file)){
            Error("不支持的图片格式.图片类型必须是.jpeg,jpg,png,gif格式.");
            return false;
        }
        $.ajaxFileUpload({
            url : '${pageContext.request.contextPath}/workConfig/uploadOnePic?inputId=realPicFile',
            secureuri : false,
            fileElementId : 'realPicFile',
            dataType : 'content',
            success : function(data, status){
                $("#realPic").attr("src", data);
            },
            error : function(data, status, e){
                alert(e);
                //Error(e);
            }
        });
        return false;
    }
    </script>
</body>
</html>

    后台controller代码（不包括切图）：

    package com.leslie.controller;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;

import org.apache.commons.lang3.exception.ExceptionUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.ModelAndView;

import com.leslie.model.DesignerWorks;
import com.leslie.model.MemberDesigner;
import com.leslie.model.User;
import com.leslie.service.DesignerService;
import com.leslie.util.ConstantsUtil;
import com.leslie.validator.DesignerWorksValidator;

@Controller
@RequestMapping("/workConfig")
public class SJWorkConfigController {
@RequestMapping("/uploadOnePic")
    @ResponseBody
    public String fileUpload(String inputId, MultipartHttpServletRequest request) {
        try {
            MultipartFile realPicFile = request.getFile(inputId);
            if (realPicFile != null) {
                // 取得当前上传文件的文件名称
                String myFileName = realPicFile.getOriginalFilename();
                // 如果名称不为“”,说明该文件存在，否则说明该文件不存在
                if (myFileName.trim() != "") {
                    System.out.println(myFileName);
                    // 重命名上传后的文件名
                    String fileName = "demoUpload" + realPicFile.getOriginalFilename();
                    // 定义上传路径
                    String path = "D:/program files/apache-tomcat-8.0.33/webapps/Public/upload/images/" + fileName;
                    String pathReturn = "/Public/upload/images/" + fileName;
                    File localFile = new File(path);
                    realPicFile.transferTo(localFile);
                    return pathReturn;
                }
            }
        } catch (Exception e) {
            // LOG.error("upload header picture error : ", e);
        }
        return null;
    }
}

    过程概述：用户点选了文件选择器的按钮以后，浏览器弹出选择文件的对话框，当用户选定了某张图片并确定以后，会触发文件选择器的onchange事件，我们在onchange事件里调用ajaxfileupload将文件选择器

    选中的文件提交到后台处理，后台通过request拿到文件以后，可以裁剪，可以保存，可以做很多事情，然后将保存以后的文件的url路径返回给前台ajaxfileupload，ajaxfileupload拿到文件路径以后，将页面中

    相应的img标签的src属性改成文件路径，然后这张图片就在页面中显示出来了。

    说明：

    1、ajaxfileupload的功能只是将文件提交到后台，真正对图片进行保存、裁切等处理的还是后台程序。

    2、ajaxfileupload的dataType属性一般为"json"，但我在使用json类型时报错，后台返回给前台数据以后走到了error分支，弹出“syntexError:unexpeted token”。网上搜了一下，有高人通过修改

    ajaxfileupload源码解决了问题（原文地址：http://liwx2000.iteye.com/blog/1540321），但我在实践中按它的办法修改问题依然存在，于是我将类型改为content就搞定了，正确返回了文件的路径

    并走入了success分支。

    3、在保存文件时定义了两个文件路径，path指的是图片在服务器本地保存的绝对路径，pathReturn指的是用户在浏览器上看到的图片的src路径，此处需要注意，如果将path直接返回，

    页面上是看不到图片的。

    4、ajaxfileupload.js的下载：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

    三、后记

    按照二中的办法，似乎一切顺风顺水波澜不惊，但却有一个问题无法解决：虽然使用ajaxfileupload成功完成了图片的上传和及时预览，但文件选择器（<input type="file"）在选中了图片以后却始终无法显示

    图片的url，一直显示“未选择文件”，这似乎是ajaxfileupload的一个bug。最后我使用了一个折中的办法，将文件选择器隐藏，使用一个普通的按钮，当它被点击时触发文件选择器的onclick事件。下面重新给出整理以后的代码。

    jsp代码

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${pageTitle }</title>
<link href="/Public/media/css/new/page.css" rel="stylesheet"
    type="text/css" />
<style type="text/css">
.errormsg {
    font-family: "微软雅黑";
    color: #F30;
}
</style>

</head>
<body>
    <div class="outer">
        <div class="pathdiv">
            ${currentMenuDesc }
            <div class="tableDivTitleButtonDiv">
                <a href="${backToURL}"><input type="button"
                    class="tableDivTitleButtonDivButton" value="返回" /></a>
            </div>

        </div>
        <div class="infoTitle">${pageTitle }</div>

        <form:form action="${formActionURL}" method="post" commandName="work">
            <div class="formDiv">
                <table width="1020" border="0">
                    <tr>
                        <form:input path="worksId" type="hidden" />
                        <form:input path="designerId" type="hidden" />
                        <form:input id = "hiddenImgValue1" path="worksImg1" type="hidden" />
                        <form:input id = "hiddenImgValue2" path="worksImg2" type="hidden" />
                        <form:input id = "hiddenImgValue3" path="worksImg3" type="hidden" />
                        <td align="right">作品名称：</td>
                        <td align="left"><form:input path="worksName" /><span
                            class="errormsg"><form:errors path="worksName" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">作品说明：</td>
                        <td align="left"><form:textarea path="worksRemark" cols="30"
                                rows="10" /><span class="errormsg"><form:errors
                                    path="worksRemark" /></span></td>
                    </tr>
                    <tr>
                        <td align="right">作品图1：</td>
                        <td align="left">
                            <img src="/Public/media/image/loading2.gif" id="loading" style="display: none;">
                            <img id="realPic1" src="/Public/showimgbj.jpg"/>
                            <input name="realPicFile1" id="realPicFile1" type="file" onchange="ajaxFileUpload('realPicFile1','realPic1','hiddenImgValue1')" style='display:none'/>
                            <input type=button onclick="upImg('realPicFile1')" value="上传" />
                            <span class="errormsg">
                                <form:errors path="worksImg1" />
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">作品图2：</td>
                        <td align="left">
                            <img src="/Public/media/image/loading2.gif" id="loading" style="display: none;">
                            <img id="realPic2" src="/Public/showimgbj.jpg"/>
                            <input name="realPicFile2" id="realPicFile2" type="file" onchange="ajaxFileUpload('realPicFile2','realPic2','hiddenImgValue2')" style='display:none'/>
                            <input type=button onclick="upImg('realPicFile2')" value="上传" />
                            <span class="errormsg">
                                <form:errors path="worksImg2" />
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">作品图3：</td>
                        <td align="left">
                            <img src="/Public/media/image/loading2.gif" id="loading" style="display: none;">
                            <img id="realPic3" src="/Public/showimgbj.jpg"/>
                            <input name="realPicFile3" id="realPicFile3" type="file" onchange="ajaxFileUpload('realPicFile3','realPic3','hiddenImgValue3')" style='display:none'/>
                            <input type=button onclick="upImg('realPicFile3')" value="上传" />
                            <span class="errormsg"><form:errors
                                    path="worksImg3" />
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input name="" type="submit" value="提交" /></td>
                    </tr>

                </table>
            </div>
        </form:form>
    </div>
    <div id="errorMsgDiv"></div>
    <script src="/Public/media/js/jquery-1.10.1.min.js"
        type="text/javascript"></script>
    <script src="/Public/media/js/jquery-migrate-1.2.1.min.js"
        type="text/javascript"></script>
    <script src="/Public/media/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/Public/media/js/jquery.gritter.js" type="text/javascript"></script>
    <script src="/Public/media/js/app.js" type="text/javascript"></script>
    <script src="/Public/media/css/new/ajaxfileupload.js"
        type="text/javascript"></script>
    <script>
        jQuery(document).ready(function() {
            App.init(); // initlayout and core plugins
        });
    </script>
    <script>
        function upImg(fileID){
            $("#"+fileID).click();
        }
        function ajaxFileUpload(fileID,imgID,hiddenImgValue) {
            /*var file = $("#"+hiddenImgValue).val();
            if(!/.(jpg|png|JPG|PNG)$/.test(file)){
                Error("不支持的图片格式.图片类型必须是.jpg,png格式.");
                return false;
            }*/
            $.ajaxFileUpload({
                url : '${pageContext.request.contextPath}/workConfig/uploadOnePic?inputId='+fileID,
                secureuri : false,
                fileElementId : fileID,
                dataType : 'json',
                success : function(data, status){
                    $("#"+imgID).attr("src", data.result);
                    $("#"+hiddenImgValue).val(data.result);
                    //$(this).val(data.result);
                    //console.log($('#realPicFile'));
                },
                error : function(data, status, e){
                    alert(e);
                    //Error(e);
                }
            });
            return true;
        }
    </script>
</body>
</html>

    controller代码

    @RequestMapping("/uploadOnePic")
    @ResponseBody
    public AjaxResultDomain fileUpload(String inputId, MultipartHttpServletRequest request) {
        try {
            // 拿到文件
            MultipartFile realPicFile = request.getFile(inputId);

            // 准备好路径参数
            String uploadImagesSavePath = pathUtil.getYgbhUploadImagesDiskFolderPath(request);
            String urlRootPath = pathUtil.getYgbhUploadImagesUrlFolderPath();
            List<MultipartFile> files = new ArrayList<MultipartFile>();
            files.add(realPicFile);

            // 保存+压缩
            String fileName = MultipartFileUtil.saveAndConstrictMultipartFiles(files, uploadImagesSavePath, urlRootPath)
                    .get(0);
            String fileUrl = urlRootPath + fileName;
            AjaxResultDomain d = new AjaxResultDomain();
            d.setResult(fileUrl);
            return d;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

     注意，ajax拿到后台返回的值data以后，使用data.result给图片地址赋值而不是直接用data赋值。原因是，如果后台直接将图片地址作为String字符串返回给前台的话，js会将图片地址辨认为是一个正则表达式并报错。

    所以，对付js这么灵活的东西，能绕开就绕开，否则坑很深。不跟它纠结，直接用一个object返回来，然后取object的属性。
  • 相关阅读:
    HDU 5835 Danganronpa 贪心
    HDU 5842 Lweb and String 水题
    HDU 5832 A water problem 水题
    Codeforces Beta Round #14 (Div. 2) A. Letter 水题
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem K. UTF-8 Decoder 模拟题
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem I. Alien Rectangles 数学
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem H. Parallel Worlds 计算几何
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem F. Turning Grille 暴力
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem C. Cargo Transportation 暴力
    Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem G. k-palindrome dp
  • 原文地址：https://www.cnblogs.com/mabaishui/p/5486704.html
Copyright © 2020-2023  润新知