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

效果图：

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 “”;}

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

在win10本地开发springboot项目能上传图片，并能通过URL直接从浏览器访问，但是部署到服务器上后能上传文件，但是通过浏览器无法访问图片
在win10本地开发springboot项目能上传图片,并能通过URL直接从浏览器访问,但是部署到服务器上后能上传文件,但是通过浏览器无法访问图片 1.首先springboot项目在Window和Li ...
ajax实现文件的上传（局部刷新页面，文件上传）
一.前端jsp页面代码: //注意,这里的form表单,只去id名 <form id="localAjax">文件:<input type="file& ...
Android开发笔记（一百一十）使用http框架上传文件
HTTP上传与文件下载相比,文件上传的场合不是很多,通常用于上传用户头像.朋友圈发布图片/视频动态等等,而且上传文件需要服务器配合,所以容易被app开发者忽略.就上传的形式来说,app一般采用htt ...
smartupload 上传文件时把页面编码改成gbk 解决乱码
快来java1234 吧 smartupload 上传文件时,经常会发生因为把表单设置为 enctype="multipart/form-data"而出现的中文乱码问题,本人头疼好 ...
springboot界面上传文件和在页面上显示文件
做一个简单的上传图片和显示图片的测试首先要有web-starter的包,Springboot中内置了DispatcherServlet也配置好了MultipartResolver. 关于上传文件的特 ...
ssm + maven 上传文件（图片）
添加Pom.xml依赖:   ...
Laravel框架上传文件到OSS
1,在项目的根目录composer.json文件中加入 "aliyuncs/oss-sdk-php": "*": 2,在项目的根目录中运行以下命令 compos ...
SSM根据上传文件获取视频文件时长
一.编写前端上传文件代码 <html> <head><title>file upload</title> </head> <body& ...
【谷歌浏览器】上传文件卡死、页面另存为文件卡死解决
1.确定原因及解决方法: 1.1 原因: 最终是输入法的问题.网上找了一圈都没有找到,最后在贴吧找到,不得不说还是贴吧大神多..... 1.2 贴吧中介绍的方法: 2. 实操发现并不能解决问题. 开始 ...

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

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

最新文章

热门文章