Spring MVC---解决图片上传丢失以及img标签显示本地磁盘保存的图片(七)

20人阅读 评论(0) 收藏 举报
分类:

(一)解决图片上传丢失

如果在Tomcat部署路径下创建upload文件夹,每次部署项目的时候upload文件夹会被自动删除再重新创建upload文件夹,因此保存在upload文件夹中的图片或其它文件都会被删除。要想保存的文件和图片不被自动删除解决办法如下:

  • 在webapps并行的目录下,建一个upload文件,专门存储应用上传的文件。
  • 其它磁盘路径也可以,在webapps并行的目录下创建建一个upload文件方便查看。

(二)如何使用img标签显示本地磁盘保存的图片

今天遇到这样一个问题,在eclipse使用默认浏览器可以打开img标签引用本地磁盘路径的图片,但是使用Chrome、360和Firefox等外部浏览器无法打开本地磁盘路径下的图片。解决方法如下:

  • 在jsp页面标签引用本地路径下的图片,图片不会显示,需要在tomcat中配置虚拟路径。

在tomcat中配置虚拟路径步骤如下:

1.双击
这里写图片描述
2.点击modules

  • 真实路径:F:\Tomcat7\apache-tomcat-7.0.79
  • 虚拟路径:/upload代替真实路径
  • 创建images文件夹:项目自动在F:\Tomcat7\apache-tomcat-7.0.79下创建images文件夹

这里写图片描述
3.在jsp页面标签引用本地路径下的图片,使用虚拟路径引用本地磁盘下图片的方法如下:

方法:/虚拟路径/images文件夹/文件名
<img alt="" src="/upload/images/${newfilename}" width="140" height="170"/>

(三)文件上传实例演示

项目结构:
这里写图片描述
这里写图片描述

1./FileUpload/WebContent/FileUpload.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传</title>
<script >
   function check(){

       var file=document.getElementById("file").value;

        if(file.length==0||file==""){
            alert("请选择上传文件");
            return false;
        }
        return true;
   }
</script>
</head>
<body>
   <form action="${pageContext.request.contextPath }/fileUpload"
    method="post" enctype="multipart/form-data" onsubmit="return check()">

    请选择文件:<input id="file" type="file" name="uploadfile" 
             multiple="multiple" /><br/><br/>
             <input type="submit" value="上传" />
    </form>
</body>
</html>

2./FileUpload/src/com/wang/FileUploadController.java

package com.wang;
import java.io.File;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
@Controller
public class FileUploadController {

    @RequestMapping("/fileUpload")
    /*必须使用注释 @RequestParam("uploadfile")List<MultipartFile> uploadfile
     *否则报Failed to instantiate [java.util.List]: Specified class is an interface错误 
     * */
    public String handleFormUpload(@RequestParam("uploadfile")List<MultipartFile> uploadfile, HttpServletRequest request) {

        // 如果上传文件存在
        if (!uploadfile.isEmpty() && uploadfile.size() > 0) {
            // 遍历文件
            for (MultipartFile file : uploadfile) {

                // 获取上传文件的名称
                String originalFilename = file.getOriginalFilename();
                System.out.println("文件名"+originalFilename);

                // 设置上传文件保存的地址目录
                //String dirpath = request.getServletContext().getRealPath("/images");

                //创建images文件夹
                File filepath = new File("F:\\Tomcat7\\apache-tomcat-7.0.79\\images");
                // 如果保存文件的目录不存在,创建upload文件夹
                if (!filepath.exists()) {
                    filepath.mkdirs();
                }
                // 1.使用UUID重新命名上传文件的名称/2.替换上传文件的名称
                String newFilename =UUID.randomUUID()+ originalFilename.replace(originalFilename, ".jpg");
                System.out.println(newFilename);
                try {
                    // 使用MultipartFile的方法将文件上传到指定位置
                    file.transferTo(new File(filepath +File.separator+ newFilename));
                    System.out.println("目标路径"+filepath +File.separator+ newFilename);

                    //定义列表保存图片保存的路径
                    List<String> filenames=new ArrayList<String>();
                    filenames.add(newFilename);

                    request.setAttribute("filenames", filenames);
                } catch (Exception e) {

                    e.printStackTrace();
                    return "error";

                }
            }
        }
        return "sucess";
    }
}

3./FileUpload/WebContent/WEB-INF/jsp/sucess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>文件上传页面</title>
</head>
<body>
   <h1>文件上传成功</h1>
   <form >
       <table border="1">
          <tr>
             <th>图片展示</th>
            <!--  <th>操作</th> -->
          </tr>
          <c:forEach items="${filenames}" var="newfilename">

              <!--路径为以下形式,浏览器可以打开图片-->
             <td><img alt="" src="/upload/images/${newfilename}" width="140" height="170"/> </td>  

          </c:forEach>
       </table>
   </form>
</body>
</html>

4.JSP页面显示虚拟路径下的图片:

这里写图片描述

5.JSP页面源码如图所示:

这里写图片描述

6.images文件夹保存图片永不丢失

这里写图片描述

查看评论

springmvc 框架中 用img标签展示本地磁盘的图片

jsp方面很简单,一个img元素就可以搞定,主要是把src指向controller的路径即可 Java方面也很简单,见代码 @RequestMapping("/showImage") pub...
  • shyxian
  • shyxian
  • 2017-10-10 17:16:17
  • 358

Spring MVC 上传图片保存到本地并立即显示

1.加入jar包 上边的解析内部使用下边的jar进行图片上传。 所需jar已传入我的资源页 名字为springmc文件上传 2. SpringMVC 添加对多...
  • brooksyao
  • brooksyao
  • 2016-11-11 09:15:53
  • 6896

img标签读取本地图片

/**图片 * @author Administrator * */ @RequestMapping(value="showImg") public void Sho...
  • qq_36949713
  • qq_36949713
  • 2017-08-06 17:42:08
  • 1726

百度编辑器Ueditor自定义图片保存路径的方法

  • 2014年06月17日 09:53
  • 78KB
  • 下载

JavaWeb:img标签通过虚拟路径引用本地图片

JavaWeb使用img标签引用本地图片
  • EiffelWatchMen
  • EiffelWatchMen
  • 2017-08-11 18:19:49
  • 1400

img标签不能访问本地图片

由于现在的浏览器为了安全(我也不知道什么原理),就导致了我们在写web项目时img标签不能访问本地图片,对于问我们这种新手而言无疑是很难过了 比如: 这三种都不能用了,但是我想到几周前写的...
  • you_yyyy
  • you_yyyy
  • 2017-12-01 22:14:10
  • 437

html的img中使用SVG图片做SRC在本地测试可用但是上传服务器后不能显示问题解决

html的img中使用SVG图片做SRC在本地测试可用但是上传服务器后不能显示问题解决: 问题:html的img中使用SVG图片做SRC在本地测试可用但是上传服务器后不能显示。 原因:服务器的MI...
  • MAILLIBIN
  • MAILLIBIN
  • 2016-05-21 13:49:42
  • 4950

如何让前端获取到硬盘上的图片并显示出来,不是项目中保存的图片

@ResponseBody @RequestMapping(value = "/getImg.act") public void getImg(HttpServletRequest request...
  • yinbucheng
  • yinbucheng
  • 2017-08-01 15:26:48
  • 440

tomcat实现图片上传存放在指定硬盘中

存放在项目路径里?有少量图片或者是样式图片存放在项目路径里是没有问题的,如果涉及到图片是用户上传的,存放在项目里面就是不合理的。原因:1.图片多了存放在tomcat路径下,影响tomcat启动与运行2...
  • u011982967
  • u011982967
  • 2017-11-18 14:13:40
  • 662

SpringMVC从本地磁盘读取图片显示到JSP页面上

上一篇博客是从数据库中读取图片的二进制信息流然后显示到JSP页面上,下面是将图片存储到我的本地磁盘E中,然后在数据库中只存图片的名字 将磁盘的路径写到配置文件中,从配置文件中将地址读取出来,图片显示...
  • cwzhsi
  • cwzhsi
  • 2015-02-03 13:44:12
  • 14133
    个人资料
    持之以恒
    等级:
    访问量: 3万+
    积分: 2208
    排名: 2万+
    文章存档
    最新评论