基于Spring与Ajax实现图片上传及预览功能问题咨询

嘿，我看你正在用Spring和Ajax搞图片上传加预览，先把你给出的这段HTML整理成清晰的Markdown格式，再给你补全关键的Ajax和后端代码，这样就能顺利实现你要的效果啦：

File Upload #

• 上传表单代码：

<form id="upload-form" method="post" enctype="multipart/form-data">
    Select a file:
    <input type="file" name="uploadfile" size="45" accept="image/*" /> <!-- 这里建议把accept改成`image/*`，只允许图片文件更贴合你的预览需求哦 -->
    <br>
    <input id="submit-button" type="submit" value="Upload" />
</form>

• 结果与预览展示区域：

<p>Result: <br><span id="result"></span></p>

接下来是实现即时预览和Ajax异步上传的核心JS代码，直接放到页面的<script>标签里就行：

// 监听文件选择事件，实现图片即时预览
document.querySelector('input[name="uploadfile"]').addEventListener('change', function(e) {
    const selectedFile = e.target.files[0];
    // 只处理图片类型的文件
    if (selectedFile && selectedFile.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(event) {
            // 创建预览图片元素
            const previewImg = document.createElement('img');
            previewImg.src = event.target.result;
            previewImg.style.maxWidth = '300px'; // 限制预览图大小，避免撑爆页面
            // 更新结果区域，显示预览图
            const resultArea = document.getElementById('result');
            resultArea.innerHTML = '<strong>预览图:</strong><br>';
            resultArea.appendChild(previewImg);
        };
        reader.readAsDataURL(selectedFile);
    } else {
        document.getElementById('result').textContent = '请选择有效的图片文件！';
    }
});

// 拦截表单提交，用Ajax异步上传文件
document.getElementById('upload-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止浏览器默认的表单提交行为
    const formData = new FormData(this); // 封装表单数据（包括上传的文件）
    
    // 发送POST请求到后端接口
    fetch('/upload', { // 这里替换成你Spring后端实际的接口地址
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(uploadResult => {
        // 在结果区域追加上传状态
        const resultArea = document.getElementById('result');
        resultArea.innerHTML += `<br><br><strong>上传状态:</strong> ${uploadResult}`;
    })
    .catch(error => {
        document.getElementById('result').textContent = `上传失败: ${error.message}`;
    });
});

然后是Spring后端的文件上传处理Controller，负责接收并保存上传的图片：

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;

@RestController
public class FileUploadController {

    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("uploadfile") MultipartFile uploadFile) {
        // 检查是否选择了文件
        if (uploadFile.isEmpty()) {
            return "请先选择要上传的图片！";
        }
        
        // 定义文件保存的目录（建议把路径配置到application.properties里，硬编码不太灵活）
        String uploadDirectory = "your/local/upload/path/";
        File dir = new File(uploadDirectory);
        // 如果目录不存在，创建多级目录
        if (!dir.exists()) {
            boolean created = dir.mkdirs();
            if (!created) {
                return "上传目录创建失败，请检查权限！";
            }
        }
        
        try {
            // 构建目标文件对象
            File destFile = new File(uploadDirectory + uploadFile.getOriginalFilename());
            // 将上传的文件写入目标路径
            uploadFile.transferTo(destFile);
            return "图片上传成功！保存路径：" + destFile.getAbsolutePath();
        } catch (IOException e) {
            e.printStackTrace();
            return "图片上传失败：" + e.getMessage();
        }
    }
}

最后提几个注意点：

1. 如果是传统Spring MVC项目，需要在配置文件里添加MultipartResolver的配置；Spring Boot项目默认已经支持，不用额外配置。
2. 确保你设置的上传目录有读写权限，否则会保存失败。
3. 把JS里的/upload接口地址改成你后端实际的请求路径。

内容的提问来源于stack exchange，提问作者dorcsi