Ajax cargue y obtenga una vista previa de la imagen en segundo plano y guárdela en el servidor con MultipartFile

Referencia Referencia
Nota ajax en formData.append('uploadfile_ant', $('#myFile1')[0].files[0]); //添加图片信息的参数este uploadfile_ant mantiene el controlador en el nombre public Object uploadPic(MultipartFile uploadfile_ant,HttpServletRequest request,HttpSession s6) throws Exception {del mismo nombre

html

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
　<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.c1{width:40px;height:60px;background-color:red;border: solid 1px green;float:left}
.c2{width:40px;height:60px;background-color:red;border: solid 1px green;float:left}
.c4{width:40px;height:60px;background-color:red;border: solid 1px green;float:left}
.main{border: solid 1px blue;float:left;}
</style>
</head>
<body>
<div id="main">
<input type="file"  id="myFile1"/>

</div>

<script type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script> 
  $("#myFile1").change(function () {
        //创建blob对象，浏览器将文件放入内存中，并生成标识
        var img_src = URL.createObjectURL($(this)[0].files[0]);
        //给img标检的src赋值
        var main=document.getElementById("main");
        var img = document.createElement("img");
        img.setAttribute("id", "img");
        img.src=img_src;
        img.style.height = '100px';
        img.style.width='100px';
        main.appendChild(img);
        //document.getElementById("preview_img").src=img_src;
        //URL.revokeObjectURL(img_src);// 手动 回收，
        var formData = new FormData(); 
formData.append('uploadfile_ant', $('#myFile1')[0].files[0]);  //添加图片信息的参数
//formData.append('sizeid',123);  //添加其他参数
$.ajax({
    url: "film/uploadPic",
    //name: 'uploadfile_ant',
    type: 'POST',
    cache: false, //上传文件不需要缓存
    data: formData,
    processData: false, // 告诉jQuery不要去处理发送的数据
    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
    success: function (data) {
       // var c=eval("("+data+")");
  console.log(data.src);
       
    },
    error: function (data) {
        alert("上传失败");
    }
})  
    });
</script>
</div>
</body>
</html>

controllor

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
　<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.c1{width:40px;height:60px;background-color:red;border: solid 1px green;float:left}
.c2{width:40px;height:60px;background-color:red;border: solid 1px green;float:left}
.c4{width:40px;height:60px;background-color:red;border: solid 1px green;float:left}
.main{border: solid 1px blue;float:left;}
</style>
</head>
<body>
<div id="main">
<input type="file"  id="myFile1"/>

</div>

<script type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script> 
  $("#myFile1").change(function () {
        //创建blob对象，浏览器将文件放入内存中，并生成标识
        var img_src = URL.createObjectURL($(this)[0].files[0]);
        //给img标检的src赋值
        var main=document.getElementById("main");
        var img = document.createElement("img");
        img.setAttribute("id", "img");
        img.src=img_src;
        img.style.height = '100px';
        img.style.width='100px';
        main.appendChild(img);
        //document.getElementById("preview_img").src=img_src;
        //URL.revokeObjectURL(img_src);// 手动 回收，
        var formData = new FormData(); 
formData.append('uploadfile_ant', $('#myFile1')[0].files[0]);  //添加图片信息的参数
//formData.append('sizeid',123);  //添加其他参数
$.ajax({
    url: "film/uploadPic",
    //name: 'uploadfile_ant',
    type: 'POST',
    cache: false, //上传文件不需要缓存
    data: formData,
    processData: false, // 告诉jQuery不要去处理发送的数据
    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
    success: function (data) {
       // var c=eval("("+data+")");
  console.log(data.src);
       
    },
    error: function (data) {
        alert("上传失败");
    }
})  
    });
</script>
</div>
</body>
</html>

filedo

package beans;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

@Service
public class filedo {
	@Autowired
	private String description;
    private MultipartFile myfile;
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public MultipartFile getMyfile() {
        return myfile;
    }
    public void setMyfile(MultipartFile myfile) {
        this.myfile = myfile;
    }
	}

//————————————————
//版权声明：本文为CSDN博主「Asher1」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
//原文链接：https://blog.csdn.net/a447332241/article/details/75125305
//}

Ajax cargue y obtenga una vista previa de la imagen en segundo plano y guárdela en el servidor con MultipartFile

Supongo que te gusta