1、javaweb传统的上传图片方式就是通过form表单提交

<form action="#" method="post" enctype="multipart/form-data">

    <input type="file" name="file">

    <input type="submit" value="上传">

</form>

2、现在想要实现：点击文件表单的"浏览"按鈕后，文件异步上传，然后返回文件的路径，页面实时刷新显示刚才上传的图片。

　　2.1、新建一个springboot项目picDemo

　　

　　pom.xml

<dependencies>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-thymeleaf</artifactId>

    </dependency>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-web</artifactId>

    </dependency>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-test</artifactId>

        <scope>test</scope>

    </dependency>

</dependencies>

　　application.properties

server.port=8090

server.servlet.context-path=/

　　2.2、要实现图片异步上传，可以使用jquery.form.js插件。

　　save.html

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="UTF-8">

<title>标题</title>

<script type="text/javascript" th:src="@{/js/jquery.js}"></script>

<script type="text/javascript" th:src="@{/js/jquery.form.js}"></script>

<style type="text/css">

.hidden {

    display:none;

}

</style>

</head>

<body>

<div id="film_save">

<form id="form" action="#" th:action="@{/film/save}" method="post" th:object="${film}" enctype="multipart/form-data">

    <input type="hidden" name="id" th:value="*{id}"/>

    <table class="table">

        <tr>

            <td>电影名称：</td>

            <td><input type="text" name="name" th:value="*{name}"/></td>

        </tr>

        <tr>

            <td>电影图片：</td>

            <td><input type="file" name="file" id="file" onchange="fileUpload()"/></td>

        </tr>

        <tr>

            <td><input type="hidden" id="imageUrl" name="imageUrl" value=""/></td>

            <td><img id="imgSrc" th:class="${film.imageUrl eq null or film.imageUrl eq ''}?hidden:''" th:src="'http://localhost:8080/image/' + ${film.imageUrl}" style="width:200px;"/></td>

        </tr>

        <tr>

            <td></td>

            <td><input type="submit" value="保存"/></td>

        </tr>

    </table>

</form>

<script type="text/javascript">

    function fileUpload() {

        var option = {

            type:'POST',

            url:'/film/uploadPic',

            dataType:'json',

            data:{

                fileName : 'file'

            },

            success:function(data){

                //把json串转换成json对象

                //var jsonObj = $.parseJSON(data);

                //alert(data);

                //返回服务器图片路径，把图片路径设置给img标签

                $("#imgSrc").attr("src",data.fullPath);

                // 显示图片

                $("#imgSrc").removeClass("hidden");

                //数据库保存相对路径

                $("#imageUrl").val(data.relativePath);

                //alert($("#imageUrl").val());

            }

        };

        $("#form").ajaxSubmit(option);

    }

</script>

</div>

</body>

</html>

　　2.3、后端代码

　　IndexController

package com.oy;

import java.io.File;

import java.util.HashMap;

import java.util.Map;

import java.util.UUID;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

@Controller

public class IndexController {

    @RequestMapping("/save")

    public Object save(Film film) {

        return "save";

    }

    @RequestMapping("/film/uploadPic")

    @ResponseBody

    public Object uploadPic(MultipartFile file) throws Exception {

        String oldName = file.getOriginalFilename();

        String newName = UUID.randomUUID().toString().replace("-", "").toUpperCase()

                + "_" + oldName;

        System.out.println("上传的图片的newName: " + newName);

        File base = new File("d:/image/filmImage/");

        if (! base.exists()) {

            base.mkdirs();

        }

        // 保存文件

        file.transferTo(new File("d:/image/filmImage/" + newName));

        // 封装返回结果

        Map<String, Object> map = new HashMap<>();

        map.put("fullPath", "http://localhost:8090/image/" + newName);

        map.put("relativePath", newName);

        return map;

    }

}

　　Film类：

public class Film {

    private Integer id; // 编号

    private String name; // 电影名称

    private String imageUrl; // 电影图片

    // getter和setter方法省略

}

　　图片上传后，java返回的json数据为：

{

    "fullPath": "http://localhost:8090/image/E29C543179AD4B69B521EB542D9E735E_无标题.png",

    "relativePath": "E29C543179AD4B69B521EB542D9E735E_无标题.png"

}

　　其中，fullPath为图片全路径。要实现图片上传后，图片刷新显示，还要再springboot中配置图片保存目录的路径映射：

　　WebConfigurer类

package com.oy;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration

public class WebConfigurer implements WebMvcConfigurer {

    @Override

    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.addResourceHandler("/image/**").addResourceLocations("file:D:/image/filmImage/");

    }

}

3、其他

　　3.1、上面的demo是将图片保存目录的路径进行了映射。图片url与demo是在同一个域，都是http://localhost:8090，其实图片可以配置成其他的，比如http://localhost:8091，然后用外置的tomcat（非springboot内置）或nginx配置映射。

　　3.2、将图片上传至图片服务器（分布式文件系统）

springmvc+ajax异步上传图片的更多相关文章

  1. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  2. ajax异步上传图片&SpringMVC后台代码

    function uploadPic(){ var options = { url : "/upload/updatePic.action", type : "post& ...

  3. 使用Ajax异步上传图片的方法(html,javascript,php)

    前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...

  4. ajax异步上传图片三种方案

    转自:http://www.jb51.net/article/51180.htm 注:自己尝试了前两种,都可用: 目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效 ...

  5. ajax异步上传图片(TP5)

    直接上代码 PHP代码如下 /** * 上传 */ public function upload_photo(){ $file = $this->request->file('file') ...

  6. thinkPHP利用ajax异步上传图片并显示、删除

    近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...

  7. thinkphp5 不使用form，用input+ajax异步上传图片

    不支持$this->request->file()获取图片 后台接收文件请使用$_FILE 正文开始: HTML <div class="upload"> ...

  8. js 原生 ajax 异步上传图片

    <script type="text/javascript"> function upload() { var file1 = document.getElementB ...

  9. Ajax实现异步上传图片

    要求:点击页面浏览按钮后,选择需要上传的图片,页面无刷新,将上传的图片展示出来 开发流程 一:在页面编写表单代码和js代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

随机推荐

  1. python_面试题_HTTP基础相关问题

    1.相关问题 问题1: 客户端访问url到服务器,整个过程会经历哪些 问题2: 描述HTTPS和HTTP的区别 问题3: HTTP协议的请求报文和响应报文格式 问题4: HTTP的状态码有哪些? 2. ...

  2. ROS系统的安装以及卸载

    ROS系统的安装 ROS系统的安装方式有两种,通过软件源和源码编译安装.软件源安装只需要通过简单的命令,因此,我们使用软件源来安装ROS 配置系统软件源 打开Ubuntu软件中心的软件源配置界面,勾选 ...

  3. 华为HCNA乱学Round 3：华为基础

  4. 最大公约数与最小公倍数C++实现

    最大公约数为辗转相除法求得, 最小公倍数为两数之积与最大公约数的比值 #include<iostream> using namespace std; int gcd(int, int); ...

  5. spring boot-14.集成MyBatis

    1.如何使用注解版Mybatis? (1)引入mybatis ,druid,Mysql 的依赖,环境搭建可以参考第13篇的内容 <dependency> <groupId>or ...

  6. nginx配置本地域名反向代理实现本地多域名80访问

    什么是反向代理? 代理:通过客户机的配置,实现让一台服务器代理客户机,客户的所有请求都交给代理服务器处理. 反向代理:用一台服务器,代理真实服务器,用户访问时,不再是访问真实服务器,而是代理服务器. ...

  7. HTTP、HTTPS 了解一下

    什么是HTTP? 超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准.设计HTTP的初 ...

  8. linux：RAID（磁盘阵列）笔记

    RAID磁盘阵列简述:     RAID0(条带): 把多个同样大小的磁盘串联起来当做一个磁盘来用.         优点:读写速度快.         缺点:数据容易丢失(没有容错能力).     ...

  9. Jpa/Hibernate 字节码增强：字段延迟加载

    JPA提供了@Basic注解,实现延迟加载字段的功能,如下: @Basic(fetch = FetchType.LAZY) @Column(name = "REMARK_CONTENT&qu ...

  10. Servlet监听器——实现在线登录人数统计小例子

    一.概念 servlet监听器的主要目的是给web应用增加事件处理机制,以便更好的监视和控制web应用的状态变化,从而在后台调用相应处理程序. 二.监听器的类型 1.根据监听对象的类型和范围,分为3类 ...