ajax上传图片存入到指定的文件夹并回显

置顶 G-宁

于 2023-04-06 11:46:16 发布

阅读量731

点赞数 2

文章标签： ajax javascript servlet

本文链接：https://blog.csdn.net/weixin_58094032/article/details/129985962

版权

该文章展示了一个HTML页面，包含一个文件上传表单，使用jQuery处理提交按钮的点击事件，通过Ajax将文件数据发送到后端SpringMVC控制器。控制器接收到MultipartFile对象，将文件保存到本地目录。

摘要由CSDN通过智能技术生成

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.1.0.js"></script>
</head>
<body>
<form id="files">
    <input type="file" name="file">
    <input type="button" id="tijiao" value="提交">
    <input type="button" value="删除">
    <br>

    <img src="" width="1000px" height="500px">
</form>
<script>
    $(function (){
        $("#tijiao").click(function () {
            alert('提交成功');

            var formData = new FormData($('#files')[0]);
            $.ajax({
                url:'shangchuan',
                type:'post',
                data: formData,//需要提交的数据，传入实例化的formdata对象，，此对象包含了要上传的文件
                processData: false,
                contentType:false,
            });
        })

        var fd =  new FormData(document.getElementsByTagName("form")[0]);
        var photo = document.querySelector("input");
        var img = document.querySelector("img");
        photo.onchange = function (){
            img.src = window.URL.createObjectURL(this.files[0]);
        }
    })

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

controller：

package com.example.uploadanimage.controller;

import org.apache.commons.lang3.time.DateUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;

@RestController
public class Upload {


        @PostMapping("/shangchuan")
        public String shangchuan(MultipartFile file) throws Exception {

            String originalFilename = file.getOriginalFilename();
            System.out.println(originalFilename);

            File file1 = new File("D:\\img",originalFilename);
            file.transferTo(file1);
            return "上传成功";
        }
}

html页面：