Dropzone组件的使用及注意点（SSM）

Dropzone组件的使用及注意点（SSM）

dropzone.js 是一个开源的 JavaScript 库，提供 AJAX 异步上传功能。

官方文档地址：

http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/#installation

Dropzone 使用：

1. 引入相关文件

需要样式则引入如下文件

前台代码：

html：

js：

后台代码：

引入fileupload.jar

   commons-fileupload
    commons-fileupload
    1.2.1



    commons-io
    commons-io
    2.3

Spring-mvc 中配置上传解析器：

Controller

@RequestMapping("xmlUpload")
@ResponseBody
public JsonResult xmlUpload(@RequestParam("file") MultipartFile file,HttpServletRequest request){
    logger.info("正在执行XML文件上传工作!");

    System.out.println(file.getOriginalFilename());

    String contentPath = request.getSession().getServletContext().getRealPath("/");

    xmlManageService.xmlUpload(file, contentPath);
    //反查ID处理
    // useGeneratedKeys="true" keyProperty="id"
    return new JsonResult();
}

Service

private static final int DIR = 1;
private static final int FILE = 0;

@Resource
private XMLManageDao xmlManageDao;

public void xmlUpload(MultipartFile file,String contentPath) {
    //原文件名,文件后缀
    String fileName = file.getOriginalFilename();

    //文件夹路径
    String dirPath = createDir(contentPath);

    //创建文件夹
    createDirOrFile(dirPath,DIR);

    //新文件名
    String newFileName = generateNewFileName(fileName);

    //文件路径
    String filePath = dirPath + "/"+newFileName;

    //创建文件
    createDirOrFile(dirPath,FILE);

    //复制文件
    copyFile(file,new File(filePath));
}

//创建文件夹
private String createDir(String contentPath){
    //当日日期
    SimpleDateFormat fmt = new SimpleDateFormat("yyyy/MM/dd");
    Date date = new Date();

    //文件存储文件夹
    String dirPath = contentPath+"../xmlFiles/"+fmt.format(date);

    return dirPath;
}

//生成新文件名
private String generateNewFileName(String fileName){
    //新文件名
    UUID uuid = UUID.randomUUID();
    String suffix = fileName.substring(fileName.lastIndexOf("."));

    return uuid+suffix;
}

// 创建文件 or 文件夹
private void createDirOrFile(String path,Integer isDir){
    File file = new File(path);
    if(isDir == 1){
        file.mkdirs();
    }else{
        if(!file.exists()){
            try {
                file.createNewFile();
            } catch (IOException e) {
                logger.error("创建文件失败!",e);
                throw new ServiceRuntimeException("创建文件失败!");
            }
        }
    }
}

//复制文件
private void copyFile(MultipartFile sourceFile,File newFile){
    try {
        sourceFile.transferTo(newFile);
    } catch (IllegalStateException e) {
        e.printStackTrace();
        logger.error("上传文件状态异常!",e);
        throw new ServiceRuntimeException("上传文件状态异常!");
    } catch (IOException e) {
        e.printStackTrace();
        logger.error("文件读写IO异常!",e);
        throw new ServiceRuntimeException("文件读写IO异常!");
    }
}

---

• 效果图如下：

• 上传成功：
  

• 上传失败：
  

坑爹的问题：

parallelUploads参数：
首先看下官方的给出的解释：
有多少文件将上载到并行处理 (见 进行排队文件上传 部分获取更多信息)[译者注：本人在使用过程发现：当使用手动上传时，每次只能上传两个文件，这样需要多次点击才能实现所有上传，最后学习了一下 Enqueuing file uploads 里面的关于自动上传时的处理流程，设置了这里的参数时，才能一下子全部队列上传]
本人在使用时出现多文件上传后台只能接收并处理两个文件，后查阅官方文档发现如上配置项，修改该配置项后成功完成多文件上传。

---

自定义返回参数接收处理：（如果上传失败则file.status的值为error，上传失败file中不会有xhr参数值，故此处嵌套判断）

if(file.status == "success"){
    var result = JSON.parse(file.xhr.response);
    if(result.status == 1){
        setTimeout(function(){
            myDropzone.removeFile(file);
        },1000);
    }
}

相关配置：

uploadMultiple
默认值：false
如果配置该项为true，则代表一次请求发送多个文件
上述示例中的代码经过多次调用完成文件上传，每次发送一个文件

autoProcessQueue
默认值：true
如果配置该项为false，则表示不自动上传队列中的文件
上述示例中的代码在文件选择完成/拖拽到指定位置时自动上传队列中的文件
如果需要设置为true，则需调用myDropzone.processQueue()方法完成队列文件上传