【JS插件】DropZone

简述

DropZone 是一款JavaScript 文件拖拽上传插件，提供Ajax异步上传功能。

目录结构：

DropZone

前端

导入CSS和JS文件：

<!-- Drop Zone-->
<link rel="stylesheet" href="/static/admin/assets/plugins/dropzone/css/dropzone.css">
<link rel="stylesheet" href="/static/admin/assets/plugins/dropzone/css/basic.css">

<!-- dropZone -->
<script src="/static/admin/assets/plugins/dropzone/js/dropzone.min.js"></script>
<script src="/static/admin/assets/js/html/dropZone.js"></script>

DropZone实现效果十分简单，只需要一个div

<div id="dropz" class="dropzone"></div>

Jq代码：

var myDropzone = new Dropzone("#dropz", {
    url: "/admin/upload", // 文件提交地址
    method: "post",  // 也可用put
    paramName: "dropzFile", // 默认为file
    maxFiles: 1,// 一次性上传的文件数量上限
    maxFilesize: 5, // 文件大小，单位：MB
    acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
    addRemoveLinks: true,
    parallelUploads: 1,// 一次上传的文件数量
    //previewsContainer:"#preview", // 上传图片的预览窗口
    dictDefaultMessage: '拖动文件至此或者点击上传',
    dictMaxFilesExceeded: "您最多只能上传1个文件！",
    dictResponseError: '文件上传失败!',
    dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
    dictFallbackMessage: "浏览器不受支持",
    dictFileTooBig: "文件过大上传文件最大支持.",
    dictRemoveLinks: "删除",
    dictCancelUpload: "取消",
    //请求成功后执行的函数
    init: function () {
        this.on("success", function (file, data) {
            $("#articleUrl").val(data.path);
        });
    }
});
Dropzone.autoDiscover = false;

后台

后台文件上传方法，该方法同时处理了dropZone文件上传插件和Editor.md文件上传：

/**
     * 文件上传
     * @param dropzFile
     * @param editorFile
     * @param request
     * @return
     */
    @RequestMapping(value = "upload",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> DropZone(MultipartFile dropzFile,
                                       @RequestParam(value = "editormd-image-file", required = false) MultipartFile editorFile,
                                       HttpServletRequest request){
        //数据返回对象
        Map<String,Object> result = new HashMap<>();
        //判断是dropZone文件还是editor文件
        MultipartFile myFile = dropzFile == null ? editorFile : dropzFile;
        if(myFile != null){
            //获取文件名
            String fileName = myFile.getOriginalFilename();
            //获取文件后缀名
            String fileSuffix = fileName.substring(fileName.lastIndexOf("."));
            //获取文件上传文件夹路径
            String filePath = request.getSession().getServletContext().getRealPath(Const.UPLOAD_PATH);
            //判断文件夹是否存在,不存在就创建文件夹
            File file = new File(filePath);
            if(! file.exists()){
                file.mkdirs();
            }
            //UUID替换文件名
            String filePrefix = UUID.randomUUID().toString();
            file = new File(filePath,filePrefix+fileSuffix);
            //上传文件
            try {
                myFile.transferTo(file);
            } catch (IOException e) {
                logger.error("博客展示图上传出错！！！");
            }
            //拼装url返回值
            String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + Const.UPLOAD_PATH + filePrefix + fileSuffix;
            //根据不同的文件封装返回信息
            if(dropzFile != null){
                result.put("path",url);
            }
            /**
             * success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
             * message : "提示的信息，上传成功或上传失败及错误信息等。",
             * url     : "图片地址"        // 上传成功时才返回
             */
            if(editorFile != null){
                result.put("success",1);
                result.put("message","上传成功");
                result.put("url",url);
            }
        }
        //文件为空
        else{
            //根据不同的文件封装返回信息
            if(dropzFile != null){
                result.put("path","");
            }
            /**
             * success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
             * message : "提示的信息，上传成功或上传失败及错误信息等。",
             * url     : "图片地址"        // 上传成功时才返回
             */
            if(editorFile != null){
                result.put("success",0);
                result.put("message","上传失败");
            }
        }

        return result;
    }