dropzone多文件上传

最新推荐文章于 2025-07-14 13:38:16 发布

焱墩

最新推荐文章于 2025-07-14 13:38:16 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： dropzone多文件上传

本文链接：https://blog.youkuaiyun.com/yang1076180972/article/details/89511746

前端专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍使用Dropzone.js进行文件上传的配置与实现过程，包括前端HTML、JS代码及后端Java处理逻辑，适用于多文件批量上传场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、文件引入，具体修改对应的路劲

下载所需dropzone文件的路径：dropzone文件

<link rel="stylesheet" type="text/css" href="../static/css/dropzone.css" href="@{/static/css/dropzone.css}" />
 <script src="../static/libs/jquery.min.js" src="@{/static/libs/jquery.min.js}" type="text/javascript"></script>
 <script src="../static/plugins/dropzone/dropzone.js" src="@{/static/plugins/dropzone/dropzone.js}" type="text/javascript"></script>

二、html代码

<body>
<div class="form-group">
    <div id="dropz" class="dropzone">
    </div>
</div>
<input type="hidden" name="file" ng-model="file_id" id="file_id"/>
<div id="imgs" style="padding: 5px 10px 10px 5px;text-align: center;">
</div>
</body>

三、js代码

    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("#dropz", {
        autoProcessQueue: true, //自动上传
        url: "/upload",//文件提交地址
        method:"post",  //也可用put
        paramName:"file", //默认为file
        maxFiles:10,//一次性上传的文件数量上限
        maxFilesize: 1024, //文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
        uploadMultiple: true,
        addRemoveLinks:true,
        parallelUploads: 1,//一次上传的文件数量
        //previewsContainer:"#preview",//上传图片的预览窗口
        dictDefaultMessage:'拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传5个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
        dictFallbackMessage:"浏览器不受支持",
        dictFileTooBig:"文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init:function(){
            this.on("addedfile", function(file) {
                //上传文件时触发的事件
                document.querySelector('div .dz-success-mark').style.display = 'block';
            });
            this.on("success",function(file,data){
                
                
                //上传成功触发的事件
                console.log('ok');
//              angular.element(appElement).scope().file_id = data.data.id;
                document.querySelector('div .dz-success-mark').style.display = 'block';
            });
            this.on("error",function (file,data) {
                //上传失败触发的事件
                console.log('fail');
                var message = '';
                //lavarel框架有一个表单验证，
                //对于ajax请求，JSON 响应会发送一个 422 HTTP 状态码，
                //对应file.accepted的值是false，在这里捕捉表单验证的错误提示
                if (file.accepted){
                    $.each(data,function (key,val) {
                        message = message + val[0] + ';';
                    })
                    //控制器层面的错误提示，file.accepted = true的时候；
                    alert(message);
                }
            });
            this.on("removedfile",function(file){
                //删除文件时触发的方法
//              var file_id = angular.element(appElement).scope().file_id;
//              if (file_id){
//                  $.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {
//                      console.log('删除结果:'+data.message);
//                  })
//              }
//              angular.element(appElement).scope().file_id = 0;
                document.querySelector('div .dz-default').style.display = 'block';
            });
        }
    });

注意：二里面的<div id="dropz" class="dropzone"> 的id值和三里面的new Dropzone("#dropz" 的值一致才可以初始化；

另里面有

maxFiles:10,//一次性上传的文件数量上限

parallelUploads: 1,//一次上传的文件数量

这两个属性，设置值的时候一定得注意，是有牵连的，也就是说可以解决多个文件上传到后台的问题；如果你选择了多个文件，但是调试的时候发现后台就只传了一个文件，那么就试试这个值的正确配置；上面的值是有效的，规律可以自己去慢慢研究；

四、后台java代码：

    @ResponseBody
    @PostMapping("/upload")
    
    public R upload(@RequestPart(name = "file",required = false)MultipartFile file){
        R r = uploadFile(file);
        return R.ok(r);
    }

public R uploadFile(MultipartFile file){
        FileFeignApi fileUploadResource = Feign.builder()
                .decoder(new JacksonDecoder())
                .encoder(new FeignSpringFormEncoder()) //这里没有添加decoder了
                .target(FileFeignApi.class,"http://127.0.0.1:8087");
        return fileUploadResource.uploadSimple(file);
    }

至于具体流的后台实现可以去搜一下；

这里主要是说前段的代码，好了，基本就可以运行了；