效果图：
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的对象。
参考：/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 “”;}
