from表单提交图片回显,立刻回显

it2025-12-26  8

from表单提交图片回显,立刻回显

1、html文件

<div> <form action="uploadfile.do" method="post" enctype="multipart/form-data"> 学生头像<br> <img id="img" src="默认.jpg" style="width:90px;height:90px"> <input id="filename" type="file" name="filename" onchange="showImage()"> <input type="submit" value="保存图片"> </form> </div> <script> function(){ var reads = new FileReader(); var file = document.getElementById("filename").files[0]; reads.readAsDataURL(file); reads.onload=function(){ document.getElementById("img").src= this.result; } } </script>

2、后端controller

@RequestMapping(value = "/upload.do") public String upLoadFile(Student student,MultipartFile filename, HttpServletRequest response) throws IOException { // 上传文件时获得输入流 InputStream inputStream = filename.getInputStream(); // 创建服务器本地文件类型对象 FileOutputStream outputStream = new FileOutputStream(new File("G:/abc.jpg")); IOUtils.copy(inputStream,outputStream); return "uploadSuccess"; }

然后就可以在本地的G盘看到 abc.jpg的图片了

最新回复(0)