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

【代码】ajax上传图片存入到指定的文件夹并回显。

G-宁

780人浏览 · 2023-04-06 11:46:16

G-宁 · 2023-04-06 11:46:16 发布

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页面：

页面回显效果图：

提交：

提交完成存入文件夹：

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。