SSM框架上传文件并不刷新页面，并预览图片

最新推荐文章于 2023-11-25 14:25:09 发布

代码改变宇宙

最新推荐文章于 2023-11-25 14:25:09 发布

阅读量7.2k

点赞数

文章标签： Java JavaScript SSm

本文链接：https://blog.youkuaiyun.com/qq_43153693/article/details/90311514

版权

效果图：
在这里插入图片描述
Jsp代码（样式自己调）：

<img id="HeadImg" src="" data-bd-imgshare-binded="1" style="height: 120px;width: 120px;">
<input type="file" id="SelectTheFile" name="SelectTheFile" hidden>
<a id="SelectThe" href="javascript:;">选择文件</a>

Js代码：

var ImageReader=new FileReader();/// FileReader接口，用于读取文件
    	 //回调函数onLoad异步
            ImageReader.onload = function (evt) {
                $("#HeadImg").attr("src", evt.target.result);//将数据结果赋值给imges的src
            };
            //正则表达式过滤上传的图片类型
            regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
            $("#SelectTheFile").change(function () {
                var imgFile= $("#SelectTheFile").prop('files')[0];//prop添加属性名称
                console.log(imgFile);
                if(imgFile!=undefined){
                	var Type = imgFile.type;
                //加载img标签 ,判断是否是图片类型
                if (!regexImageFilter.test(Type)) {
                    alert("选择的不是图片类型！")
                    $("#SelectTheFile").val("");
                }
                //readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL，将该URL绑定到img标签的src属性上，就可以实现图片上传的预览效果
                ImageReader.readAsDataURL(imgFile);
                }
      });

用ajax对表单进行序列化并上传，会出现报以下错
在这里插入图片描述

原来不仅仅是form的enctype="multipart/form-data"问题，普通的form表单进行序列化只是只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。所以我们需要用FormData的对象。
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
代码如下：

				//对from表单创建FormData对象
				var oData = new FormData(document.forms.namedItem("UserForm" ));  
				var oReq = new XMLHttpRequest();  
				oReq.open( "POST", "路径" , true );  
				oReq.onload = function(data) {  
				//接收后台传递的参数
				alert(oReq.responseText);
				};  
				oReq.send(oData);

后台代码如下：

public String ModifyTheUser(@RequestParam(value="input的name",required=true)MultipartFile myfile) throws IOException{
		if (myfile.getSize() > 0) {
			//路径
	        String path = “上传的路径”;
			System.out.println(path);
			//获取文件原名
			String fullName=myfile.getOriginalFilename();
			//获取扩展名称
			String ext=fullName.substring(fullName.lastIndexOf("."));
			//拼接文件保存的名称
			String fileName=System.nanoTime()+ext;
			//保存文件
			FileUtils.writeByteArrayToFile(new File(path, fileName), myfile.getBytes());
		}
		return “”;
	}