dropzone多文件上传

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

下载所需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",  //也可用putparamName:"file", //默认为filemaxFiles:10,//一次性上传的文件数量上限maxFilesize: 1024, //文件大小，单位：MBacceptedFiles: ".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);}

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

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

dropzone多文件上传相关推荐

java利用dropzone多文件上传
DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库, 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制.文档官网https://www.dropzonejs.com/ ...
Dropzone单文件上传、多文件上传、文件夹上传，springmvc接收，上传至Minio的一系列问题
0 前言 1.项目需要上传文件和大量的文件夹,页面只有一个input file标签会很丑,偶然间得知dropzone类库, 决定使用. 2. 项目后端采用springmvc接收,调用minio代码上传 ...
DropZone（文件上传插件）
1. html文件 dropzone的原理是模拟表单来上传文件,html中的元素有多重形式. 可以建立一个form表单: 1 2 3 <form id="dropz" act ...
php 拖动多个文件上传,dropzone拖拽文件上传一次上传多个文件的方法
用dropzone插件拖拽文件上传默认情况是把一个文件拖到浏览器后就立即自动上传,参考前文<用dropzone插件拖拽文件上传>,如果需要一次上传多个文件怎么办?本文将介绍其实现方法. d ...
在ASP.NET Core 3.1 MVC中集成Vue.js V4和使用Dropzone文件上传
目录介绍先决条件 Node.js的介绍您已经安装了Node.js/NPM吗? Node/ NPM版本相关的常见错误 Vue.js简介安装Vue.js V4 NET Core介绍安装Visua ...
dropzone java实例_Java实现拖拽文件上传dropzone.js的简单使用示例代码
Java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. 自己写的拖拽文件至一个按钮上传的功能,前端及java代码如下: js ...
文件上传工具--dropzone.js
前段时间在项目中要用一个文件上传工具,于是研究了一下dropzone.js.dropzone.js是一个可预览的上传文件工具,不依赖任何框架(如jQuery),且具有可定制化.实现文件拖拽上传,提供A ...
Dropzone实现图片文件上传
技巧: 打开js文件,查看默认配置,就知道可以调哪些配置了对比simple案例的布局来查找自己想要的布局 => dropzone的样式,如果想要和官网的样式一样,就可以使用这种方式仿造 Htm ...
dropzone.js应用java_拖拽文件上传（Java篇）dropzone.js的简单使用
java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. dropzonejs 的官网是:http://www.dropzon ...

dropzone多文件上传

dropzone多文件上传相关推荐

最新文章

热门文章