springmvc的圖片上傳與導出顯示

時間 2019-11-13

原文原文鏈接

1.前端文件上傳須要在form表單內添加enctype="multipart/form-data" ，以二進制傳遞：javascript

2.web.xml文件內配置css

<servlet-mapping>
<servlet-name>spring</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>html

3.springmvc.xml文件配置前端

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="900000000000"/>
</bean>java

4.Controlle裏面接受MultipartFile，在tomcat內建立虛擬盤指向盤符好比"E:\\picture\\"jquery

將圖片名字存儲到數據庫內web

如下爲爲實現代碼：spring

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 prefix="sf" uri="http://www.springframework.org/tags/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>Insert title here</title>
    <meta name="keywords" content="響應式後臺">
    <meta name="description" content="使用了Html5+CSS3等現代技術">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    
    <link href="css/style.css" rel="stylesheet" type="text/css" />
      
    <style>
        .lightBoxGallery img {
            margin: 5px;
            height : 150px;
        }
    </style>
  

<script type="text/javascript">  
    window.onload = function() {  
        var w = 250;//設置最大寬度,也可根據img的外部容器 而動態得到,好比：$("#demo").width();  
        $("img").each(function() {//若是有不少圖片,使用each()遍歷   
            var img_w = $(this).width();//圖片寬度   
            var img_h = $(this).height();//圖片高度   
            if (img_w > w) {//若是圖片寬度超出指定最大寬度   
                var height = (w * img_h) / img_w; //高度等比縮放   
                $(this).css( {  
                    "width" : w  
                });//設置縮放後的寬度和高度   
            }  
        });  
  
    }  
    $(document).ready(function() {  
        
    })  
</script>  
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">

                    <div class="ibox-content">
                        <div>
                        <sf:form action="fileUpload.do" method="post" enctype="multipart/form-data" >
                        <table>
                        <tr>
                        
                        <td>上傳風險實景圖：</td>
                        <td><input type="file" name="pic"/></td>

                        <td><input type="submit" value="上傳"></td>
                        </tr>
                        </table>
                        </sf:form>
                        </div>
                        <div class="lightBoxGallery">
                        
                            <c:if test="${not empty pictureList}">
                            <c:forEach items="${pictureList}" var="p">
                            <a href="/pp/${p.name}" class="big" title="風險圖" data-gallery=""><img class="img" src="/pp/${p.name}"></a>
                            
                            </c:forEach>
                            </c:if>
                            

                            <div id="blueimp-gallery" class="blueimp-gallery">
                                <div class="slides"></div>
                                <h3 class="title"></h3>
                                <a class="prev"><</a>
                                <a class="next">></a>
                                <a class="close">×</a>
                                <a class="play-pause"></a>
                                <ol class="indicator"></ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <script src="js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>
</html>

Controller類裏面代碼：bootstrap

package com.is.picture.control;

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

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import com.is.picture.bean.Picture;
import com.is.picture.service.pictureService;

@Controller
public class pictureControl {
    @Resource
    private pictureService pictureservice;
    
    
    
    @RequestMapping(value="picture")
    public ModelAndView pictureList(HttpServletRequest request)
    {
        ModelAndView mav = new ModelAndView(); 
        try {
            
            List<Picture> pictureList = pictureservice.findAll();
            
            System.out.println(pictureList.size());
            
            mav.addObject("pictureList", pictureList);
            
            mav.setViewName("picture/NewFile");
            
            System.out.println("明明");
            
            } catch (Exception e) {

            e.printStackTrace();

            }

            return mav;

            
    }

    @RequestMapping(value="fileUpload")
    public ModelAndView picturesc(MultipartFile pic)
    {
        Picture pt = new Picture();
         ModelAndView modelAndView = new ModelAndView();
        try {
            String originalName = pic.getOriginalFilename();
            if(pic != null && originalName != null && originalName.length()>0){
            //一、保存圖片的物理路徑

            String store = "E:\\picture\\";

            //二、新的圖片名稱

            String picNewName = UUID.randomUUID()+originalName.substring(originalName.lastIndexOf("."));

            //三、新圖片產生

            File file = new File(store+picNewName);

            //四、將內存中的數據寫入磁盤

            pic.transferTo(file);
            
            pt.setName(picNewName);
            
            
            }
            
            pictureservice.add(pt);
            
            modelAndView.setViewName("redirect:pictureSave.do");
            System.out.println("你說呢");
            } catch (IllegalStateException e) {
                
                e.printStackTrace();
            } catch (IOException e) {
                
                e.printStackTrace();
            }
        return modelAndView;
        }
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。