SpringMVC利用dropzone组件实现图片上传

操作步骤如下

一、dropzone导入

01.dropzone官网下载其插件压缩包并复制项目；

02.将CSS和JS文件在HTML文件中引入；

//下面src中的地址根据自己文件地址进行修改，不能之间copy，否则可能用不了！！！

二、dropzone的使用

只需要一个 div 元素，用 JavaScript 代码启用即可

HTML 结构如下：

JavaScript 启用代码如下：

前端工作做完后，后台需要提供文件上传支持，我们使用 Spring MVC 来接收上传的文件

三、SpringMVC的处理

commons-fileupload jar包导入

01.如果使用Meaven仓库，在其Pom.xml添加如下依赖。

  commons-fileupload
  commons-fileupload
  1.3.2

 如果未使用Meaven，百度commons-fileupload下载jar并复制到项目中。

配置 spring-mvc.xml

需要 Spring 注入 multipartResolver 实例，spring-mvc.xml 增加如下配置：

Controller类的代码实现

@Controller
public class UploadController {

  @ResponseBody
  @RequestMapping(value = "upload", method = RequestMethod.POST)
  public String upload(MultipartFile dropzFile, HttpServletRequest request) {
   

    // 获取上传的原始文件名
    String fileName = dropzFile.getOriginalFilename();
    // 设置文件上传路径
    String filePath = request.getSession().getServletContext().getRealPath("/static/upload");
    // 获取文件后缀
    String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());

    // 判断并创建上传用的文件夹
    File file = new File(filePath);
    if (!file.exists()) {
      file.mkdir();
    }
    // 重新设置文件名为 UUID，以确保唯一
    file = new File(filePath, UUID.randomUUID() + fileSuffix);

    try {
      // 写入文件
      dropzFile.transferTo(file);
    } catch (IOException e) {
      e.printStackTrace();
    }

   
    return "";
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。