在Spring MVC中,可以通过以下步骤实现让上传的图片在用户选择图片后立即显示在JSP页面上:
<img>
标签。@RequestMapping
注解将该方法与对应的URL映射起来。MultipartFile
参数接收上传的文件,并将文件保存到服务器的指定位置。${}
获取Model中保存的文件路径,并将其赋值给<img>
标签的src
属性,以实现图片的显示。下面是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>上传图片示例</title>
</head>
<body>
<form action="upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image" onchange="previewImage(this)">
<br>
<img id="preview" src="" alt="预览图片">
<br>
<input type="submit" value="上传">
</form>
<script>
function previewImage(file) {
var preview = document.getElementById('preview');
var reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
}
reader.readAsDataURL(file.files[0]);
}
</script>
</body>
</html>
@Controller
public class UploadController {
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String upload(@RequestParam("image") MultipartFile file, Model model) {
if (!file.isEmpty()) {
try {
// 保存文件到服务器指定位置
String filePath = "/path/to/save/image.jpg";
file.transferTo(new File(filePath));
// 将文件路径存储到Model中
model.addAttribute("imagePath", filePath);
} catch (IOException e) {
e.printStackTrace();
}
}
return "result";
}
}
<!DOCTYPE html>
<html>
<head>
<title>上传结果</title>
</head>
<body>
<h1>上传成功!</h1>
<img src="${imagePath}" alt="上传的图片">
</body>
</html>
在上述示例中,用户选择图片后,通过JavaScript的onchange
事件触发previewImage()
函数,该函数将用户选择的图片预览显示在<img>
标签中。然后,用户点击上传按钮,表单数据将被提交到/upload
URL对应的方法中进行处理。在处理方法中,将上传的图片保存到服务器指定位置,并将文件路径存储到Model中。最后,将结果页面返回给用户,其中使用EL表达式${imagePath}
获取Model中保存的文件路径,并将其赋值给<img>
标签的src
属性,以实现图片的显示。
请注意,上述示例中的文件保存路径和文件名需要根据实际情况进行修改。另外,为了简化示例,省略了文件上传的验证和错误处理部分,实际开发中需要根据需求进行完善。
领取专属 10元无门槛券
手把手带您无忧上云