表单上传图片并显示

最新推荐文章于 2021-05-06 22:30:14 发布

菜蜗牛很菜

最新推荐文章于 2021-05-06 22:30:14 发布

阅读量585

点赞数

分类专栏：前后端结合

本文链接：https://blog.csdn.net/weixin_45010894/article/details/103521940

版权

前后端结合专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.6</version>
    </dependency>

web.xml 3.0

<servlet>
<?xml version="1.0" encoding="UTF-8"?>

<web-app
        version="3.0"
        xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">


<display-name>Archetype Created Web Application</display-name>

  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring-*.xml</param-value>
  </context-param>

  <filter>
    <filter-name>encoding</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>encoding</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springmvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
    <multipart-config></multipart-config>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

package com.lanou;

import org.apache.commons.io.FileUtils;
import org.apache.commons.io.IOUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.Date;

@Controller
public class TestController {

    @ResponseBody

    @PostMapping("/upload2")
    public String aa(MultipartFile img, HttpServletRequest request) throws IOException {
        System.out.println(img.getSize());
        //获取文件保存地址目录
        String realPath = request.getServletContext().getRealPath("/imgs");
        //生成一个文件名
        String imgName=new Date().getTime()+".jpg";
        //保存文件(复制)
//        IOUtils.
        FileUtils.copyToFile(img.getInputStream(),new File(realPath+"/"+imgName));
        //获取文件的访问地址
        String imgUrl="/imgs/"+imgName;
        System.out.println(imgUrl);
        return imgUrl;
    }
}

<html>
<head>
    <script src="/lib/jquery-3.2.1.min(1).js"></script>
    <script src="/lib/jquery.form.js"></script>
</head>
<body>
<h2>Hello World!</h2>
<form id="uploadForm" >
    <input type="file" name="img">
    <button type="button" id="uploadBtn">upload</button>




<script>
    $("#uploadBtn").click(function () {
        //提交当前表单
        $("#uploadForm").ajaxSubmit({
            url:"/upload2",
            type:"post",
            success:function (data) {
                alert(data);

                var img='<img src="'+data+'"/>';
                $("#uploadForm").after(img);
            }
        })
    });


</script>
</form>
</body>
</html>

或者

<html>
<head>
    <script src="/lib/jquery-3.2.1.min(1).js"></script>
    <script src="/lib/jquery.form.js"></script>

    <style>
        #img_img:hover {
            cursor: pointer;
            border: #333333 solid 1px;
        }
    </style>
</head>
<body>
<h2>Hello World!</h2>
<form id="uploadForm">
    <%--图片上传按钮隐藏--%>
    <input type="file" name="img" style="display: none">
    <img src="1.jpg" id="img_img" style="width: 100px; height: 100px;">

</form>


<script>

    $("#img_img").click(function () {
        //点击图片激活上传按钮
        $("input[name='img']").click();
    });

    $('input[name="img"]').change(function () {
        //提交当前表单
        $("#uploadForm").ajaxSubmit({
            url: "/upload2",
            type: "post",
            success: function (data) {
                // alert(data);

                var img = '<img src="' + data + '"/>';
                $("#img_img").attr("src", data);
            }
        })
    });


</script>
</form>
</body>
</html>

菜蜗牛很菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单上传图片并显示

package com.lanou;import org.apache.commons.io.FileUtils;import org.apache.commons.io.IOUtils;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PostM...
复制链接

扫一扫