zoukankan      html  css  js  c++  java

  • 关于springmvc上传图片

    最近在项目中需要实现图片的上传，并且成功后返回图片上传保存路径，通过查找资料探索研究，实现了项目功能需求，记在这方便自己以后查阅，也为有同样需求的码友分享，功能实现比较简单，如果有好的建议和实现方法，还望多多指教。 

    主要将实现一下两个功能： 
    1、使用commons-fileupload实现文件的上传（包括图片）； 

    2、使用jquery-form.js实现表单提交成功的回调函数。 

    3，spring的管理还需要：commons-io-2.2.jar

    代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>H5后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="JS/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="CSS/addGame.css" />
    <script type="text/javascript">
         function login(){
             var gid=$("#gid").val();
             var gimg=$("#gimg").val();
            /*var lujing=$("#gimg").attr("src"); */
            var gname=$("#gname").val();
            var giIntroduction=$("#giIntroduction").val();
            var gtype=$("#gtype").val();
            var gtime=$("#gtime").val();
            var gurl=$("#gurl").val();
            var gjishu=$("#gjishu").val();
            var gopen=$("#gopen").val();
            var goptime=$("#goptime").val();
            var gtypeurl=$("#gtypeurl").val();
            if(gid==""||gimg==""||gname==""||giIntroduction==""||gtype==""||gtime==""||gurl==""||gopen==""||goptime==""||gtypeurl==""){
                 alert("请认真填写每一项。");
                 return ;
            }else{
                $("#formtj").submit();
            }          
         }
         function reset001(){
            $("#formtj input").val("");
         }
 </script>
</head>
<body>
    <form action="/BigMillionaire/MyBox/addGameSys.do" enctype="multipart/form-data" method="post" id="formtj" name="formtj">
        <div class="all">
            <div class="top">欢迎来到H5后台管理系统</div>
            <!--中部样式-->
            <div class="center">
                <div class="center001">
                    <label class="usernamebutton">游戏ID</label>
                    <input class="username_inpu lable01" id="gid" type="text" name="game_id" value="" />
                </div>

                <div class="center001 mtop ">
                    <label>游戏icon</label>
                    <input class="incon" id="game" name="gameimg" type="file"  />
                </div>

                <div class="center001 mtop ">
                    <label class="usernamebutton">游戏名</label>
                    <input class="username_inpu lable02" id="gname" type="text" name="game_name"value="" />
                </div>

                <div class="center001 mtop "> 
                    <label class="usernamebutton">游戏介绍</label>
                    <input class="username_inpu lable03" id="giIntroduction" type="text" name="game_shuoMing" value="" />
                </div>

                <div class="center001 mtop ">
                    <label  class="usernamebutton">游戏类型</label>
                    <select name="game_type" class="Dropbox lable05" id="gtype" value="">
                        <option value="1">飞行射击</option>
                        <option value="2">挂机放置</option>
                        <option value="3">角色扮演</option>
                        <option value="4">益智休闲</option>
                    </select>
                </div>

                <div class="center001 mtop ">
                    <label class="usernamebutton">上线时间</label>
                    <input class="username_inpu lable04" id="gtime" type="text" name="game_time" value=""  pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
                    required="required" autofocus />（格式：xxxx-xx-xx，最新栏，时间越大越靠前）
                </div>

                <div class="center001 mtop ">
                    <label class="usernamebutton">路径</label>
                    <input class="username_inpu lable06" id="gurl" type="text" name="game_url" value="" />
                </div>

                <div class="center001 mtop ">
                <label  class="usernamebutton">游戏级别</label>
                    <select name="game_jishu" id="gjishu" value="" class="Dropbox lable05">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                    </select>(推荐栏，数字越大越靠前)
                </div>

                <div class="center001 mtop ">
                    <label class="usernamebutton ">点击次数</label>
                    <input class="username_inpu lable04" id="gopen" value="" type="text" name="game_open"  />(最热栏，次数越大越靠前)
                </div>
                <div class="center001 mtop ">
                       <label class="usernamebutton">新&nbsp;或&nbsp;热</label>
                    <select name="game_typeurl" id="gtypeurl" value="" class="Dropbox lable05">
                        <option value="xin.png">新</option>
                        <option value="re.png">热</option>
                        <option value="pu.png">普通</option>
                    </select>
                </div>

                <div class="center001 mtop ">
                    <button class="usernamebutton button001" type="button" onclick="login()" > 提交</button>
                    <button class="usernamebutton" type="button" id="reset" onclick="reset001()" >重置</button>
                </div>

            </div>
        </div>
    </form>
</body>
</html>

    service代码;

    @RequestMapping("/addGameSys")
    public ModelAndView addGameSys(HttpServletRequest req, HttpServletResponse resp,
            GameBean hear,
            // gameimg为表单名。将gameimg文件表单的数据封装成CommonsMultipartFile对象    [特别注意gameimg表单名，不能和GameBean类中的名字一样。]
            @RequestParam("gameimg") CommonsMultipartFile simimg)
            throws Exception {
        try {
            // 得到上传文件名称
            String simName = simimg.getOriginalFilename();
            // 以当前时间毫秒数重命名文件
            simName = System.currentTimeMillis()
                    + simName.substring(simName.lastIndexOf("."));
            // 得到指定文件的真实路径
            String path = req.getSession().getServletContext()
                    .getRealPath("/H52/img/icon/" + simName);
            // 将CommonsMultipartFile中的文件数据写入到指定文件中
            simimg.getFileItem().write(new File(path));
            // 将文件名存放入实体bean
            hear.setGame_img(simName);
            // hear.setIsimurl(simName);
            // 调用业务组件保存数据
            // service.add(bean);
            // adminService.addHear(hear);
            myBoxService.addGameBean(hear);
            //System.out.println(hear.toString());
            hear = null;
            return new ModelAndView("H52/jumpaddGame","type",1);
        } catch(Exception e) {
            return new ModelAndView("H52/jumpaddGame","type",0);
        }
        // return new ModelAndView("H52/jumpaddGame","type",1);
    }

    实体bean，springmvc自动把数据封装到实体bean中

    public class GameBean {
    private Integer game_id;// 游戏ID
    private String game_img; // icon
    private String game_name; // 名
    private String game_shuoMing; // 介绍
    private String game_type; // 类型（下拉框选择
    private String game_time; // 上线时间
    private String game_url; // 路径
    private String game_jishu; // 级别（1-9）数字越大越靠前（下拉框选择）
    private Integer game_open; // 点击次数
    private String game_opentime; // 第一次点击时间
    private String game_xingurl;
    private String game_reurl;
    private String game_typeurl; // 图片为新或热或普通 （下拉框选择）

    xml配置文件：

    　　<bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8" />
        <property name="maxUploadSize" value="32505856" /><!-- 上传文件大小限制为31M，31*1024*1024 -->
        <property name="maxInMemorySize" value="4096" />
    </bean>

    完整：

    Html代码  
    1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    3. <html>  
    4. <head>  
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    6. <title>文件上传</title>  
    7. <script src="static/js/jquery.min.js" type="text/javascript"></script>  
    8. <script type="text/javascript" src="static/js/jquery-form.js"></script>  
    9. <script type="text/javascript">  
    10.     function subimtBtn() {  
    11.         var form = $("form[name=fileForm]");  
    12.         var options  = {    
    13.             url:'${pageContext.servletContext.contextPath}/servlet/imageUploadServlet',    
    14.             type:'post',    
    15.             success:function(data)    
    16.             {    
    17.                 var jsondata = eval("("+data+")");  
    18.                 if(jsondata.error == "0"){  
    19.                     var url = jsondata.url;  
    20.                     alert(url)  
    21.                     $("#img").attr("src",url);  
    22.                 }else{  
    23.                     var message = jsondata.message;  
    24.                     alert(message);  
    25.                 }  
    26.             }    
    27.         };    
    28.         form.ajaxSubmit(options);  
    29.         //$("#fileForm").submit();  
    30.     }  
    31. </script>  
    32. </head>  
    33. <body>  
    34.             <div class="modal-body">  
    35.                   
    36.                 <form action='${pageContext.servletContext.contextPath}/servlet/imageUploadServlet' enctype="multipart/form-data" method="post" id="fileForm" name="fileForm">  
    37.                     <input type="file" name="filename">  
    38.                 </form>  
    39.                   
    40.             </div>  
    41.   
    42.             <div class="modal-footer">  
    43.                 <button class="btn btn-primary"  onclick="subimtBtn();">提交</button>  
    44.             </div>  
    45.   
    46.     <div>  
    47.      <img alt="img" src="" id="img">  
    48.     </div>  
    49. </body>  
    50. </html>  




    servlet实现：imageUploadServlet.java 

    Java代码  收藏代码
    1. package com.system.comtrol;  
    2.   
    3. import java.io.File;  
    4. import java.io.IOException;  
    5. import java.io.PrintWriter;  
    6. import java.text.SimpleDateFormat;  
    7. import java.util.Arrays;  
    8. import java.util.Date;  
    9. import java.util.HashMap;  
    10. import java.util.Iterator;  
    11. import java.util.List;  
    12. import java.util.Random;  
    13. import javax.servlet.ServletException;  
    14. import javax.servlet.annotation.WebServlet;  
    15. import javax.servlet.http.HttpServlet;  
    16. import javax.servlet.http.HttpServletRequest;  
    17. import javax.servlet.http.HttpServletResponse;  
    18. import net.sf.json.JSONObject;  
    19. import org.apache.commons.fileupload.FileItem;  
    20. import org.apache.commons.fileupload.FileItemFactory;  
    21. import org.apache.commons.fileupload.FileUploadException;  
    22. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
    23. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
    24.   
    25.   
    26. /** 
    27.  * Servlet implementation class ImageUploadServlet 
    28.  */  
    29. @WebServlet("/servlet/imageUploadServlet")  
    30. public class ImageUploadServlet extends HttpServlet {  
    31.     private static final long serialVersionUID = 1L;  
    32.   
    33.     /** 
    34.      * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse 
    35.      *      response) 
    36.      */  
    37.     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    38.         try {  
    39.             PrintWriter out = response.getWriter();  
    40.             // 文件保存目录路径  
    41.             String savePath = request.getServletContext().getRealPath("/")+ "attached";  
    42.             // 文件保存目录URL  
    43.             String saveUrl = request.getContextPath() + "/attached";  
    44.             // 定义允许上传的文件扩展名  
    45.             HashMap<String, String> extMap = new HashMap<String, String>();  
    46.             extMap.put("image", "gif,jpg,jpeg,png,bmp");  
    47.             // 最大文件大小  
    48.             long maxSize = 1000000;  
    49.             response.setContentType("text/html; charset=UTF-8");  
    50.   
    51.             if (!ServletFileUpload.isMultipartContent(request)) {  
    52.                 out.println(getError("请选择文件。"));  
    53.                 return;  
    54.             }  
    55.             // 检查目录  
    56.             File uploadDir = new File(savePath);  
    57.             if (!uploadDir.isDirectory()) {  
    58.                 out.println(getError("上传目录不存在。"));  
    59.                 return;  
    60.             }  
    61.             // 检查目录写权限  
    62.             if (!uploadDir.canWrite()) {  
    63.                 out.println(getError("上传目录没有写权限。"));  
    64.                 return;  
    65.             }  
    66.   
    67.             String dirName = request.getParameter("dir");  
    68.             if (dirName == null) {  
    69.                 dirName = "image";  
    70.             }  
    71.             if (!extMap.containsKey(dirName)) {  
    72.                 out.println(getError("目录名不正确。"));  
    73.                 return;  
    74.             }  
    75.             // 创建文件夹  
    76.             savePath += dirName + "/";  
    77.             saveUrl += dirName + "/";  
    78.             File saveDirFile = new File(savePath);  
    79.             if (!saveDirFile.exists()) {  
    80.                 saveDirFile.mkdirs();  
    81.             }  
    82.             SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");  
    83.             String ymd = sdf.format(new Date());  
    84.             savePath += ymd + "/";  
    85.             saveUrl += ymd + "/";  
    86.             File dirFile = new File(savePath);  
    87.             if (!dirFile.exists()) {  
    88.                 dirFile.mkdirs();  
    89.             }  
    90.   
    91.             FileItemFactory factory = new DiskFileItemFactory();  
    92.             ServletFileUpload upload = new ServletFileUpload(factory);  
    93.             upload.setHeaderEncoding("UTF-8");  
    94.             List items = upload.parseRequest(request);  
    95.             Iterator itr = items.iterator();  
    96.             while (itr.hasNext()) {  
    97.                 FileItem item = (FileItem) itr.next();  
    98.                 String fileName = item.getName();  
    99.                 if (!item.isFormField()) {  
    100.                     // 检查文件大小  
    101.                     if (item.getSize() > maxSize) {  
    102.                         out.println(getError("上传文件大小超过限制。"));  
    103.                         return;  
    104.                     }  
    105.                     // 检查扩展名  
    106.                     String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();  
    107.                     if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {  
    108.                         out.println(getError("上传文件扩展名是不允许的扩展名。 只允许"    + extMap.get(dirName) + "格式。"));  
    109.                         return;  
    110.                     }  
    111.   
    112.                     SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");  
    113.                     String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;  
    114.                     try {  
    115.                         File uploadedFile = new File(savePath, newFileName);  
    116.                         item.write(uploadedFile);  
    117.                     } catch (Exception e) {  
    118.                         out.println(getError("上传文件失败。"));  
    119.                         return;  
    120.                     }  
    121.   
    122.                     JSONObject obj = new JSONObject();  
    123.                     obj.put("error", 0);  
    124.                     obj.put("url", saveUrl + newFileName);  
    125.                     out.println(obj.toString());  
    126.                 }  
    127.             }  
    128.         } catch (FileUploadException e1) {  
    129.             e1.printStackTrace();  
    130.         }  
    131.   
    132.     }  
    133.   
    134.     private String getError(String message) {  
    135.         JSONObject obj = new JSONObject();  
    136.         obj.put("error", 1);  
    137.         obj.put("message", message);  
    138.         return obj.toString();  
    139.     }  
    140.   
    141. }  




    项目中依赖的主要jar：commons-fileupload-1.2.jar，commons-io-1.4.jar 
    主要的两个js文件：jquery.min.js，jquery-form.js 
    这些可以去网上下载
  • 相关阅读:
    第08组 Alpha冲刺 (2/6)
    第08组 Alpha冲刺 (1/6)
    结对编程作业
    第01组 Alpha冲刺总结
    第01组 Alpha冲刺（6/6轮）
    第01组 Alpha冲刺（6/6）
    第01组 Alpha冲刺（5/6）
    第01组 Alpha冲刺（5/6轮）
    第01组 Alpha冲刺（4/6）
    第01组 Alpha冲刺（3/6）
  • 原文地址：https://www.cnblogs.com/sanhuan/p/4692169.html
Copyright © 2011-2022 走看看