dropzone.js应用java_使用Dropzone.js上传的示例代码
本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下:
说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php
form作为上传区
引入Dropzone.js和dropzone.css然后使用表单form定义一个class=”dropzone”即可完成
Flask upload with Dropzone example
效果
div作为上传区
div作为上传区也很简单
Flask upload with Dropzone example
//下面两行是js和jquery的方式实现绑定div的例子,你选择一种即可
//var myDropzone = new Dropzone("#myId", { url: "{{ url_for('upload_file') }}" });
$("#myId").dropzone({ url: "{{ url_for('upload_file') }}" });
效果
form作为上传区配置
配置也分为两种,如果使用的form表单上传的就用如下方式配置
Flask upload with Dropzone example
//两种配置方式,第一种,表单上传时的配置方式,可以打开form表单的注释,myAwesomeDropzone是表单的id
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: function(file, done) {
if (file.name != "justinbieber.jpg") {
done("Naha, you don't.");
}else {
done();
}
}
};
效果
div作为上传区配置
Flask upload with Dropzone example
//第二种配置,这种使用的是div做上传区域时使用的配置
Dropzone.autoDiscover = false;//不知道该行有什么用,欢迎高手下方评论解答
$("#myId").dropzone({
url: "{{ url_for('upload_file') }}",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024
});
说明:关于其他的配置请看最后的链接
主题
第一种
Dropzone.autoDiscover = false;
html, body {
height: 100%;
}
#actions {
margin: 2em 0;
}
/* Mimic table appearance */
div.table {
display: table;
}
div.table .file-row {
display: table-row;
}
div.table .file-row > div {
display: table-cell;
vertical-align: top;
border-top: 1px solid #ddd;
padding: 8px;
}
div.table .file-row:nth-child(odd) {
background: #f9f9f9;
}
/* The total progress gets shown by event listeners */
#total-progress {
opacity: 0;
transition: opacity 0.3s linear;
}
/* Hide the progress bar when finished */
#previews .file-row.dz-success .progress {
opacity: 0;
transition: opacity 0.3s linear;
}
/* Hide the delete button initially */
#previews .file-row .delete {
display: none;
}
/* Hide the start and cancel buttons and show the delete button */
#previews .file-row.dz-success .start,
#previews .file-row.dz-success .cancel {
display: none;
}
#previews .file-row.dz-success .delete {
display: block;
}
Configuration Demo
Add files...
Start upload
Cancel upload
Start
Cancel
Delete
// Get the template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
//开始先删除单个文件的布局
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(document.body, { // 指定拖拽区为body
url: "{{ url_for('upload_file') }}", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // 当队列有文件,是否立刻自动上传到服务器
previewsContainer: "#previews", // 指定存放文件队列区
clickable: ".fileinput-button" // 点击某个按钮或区域后出现选择电脑中本地图片,默认是previewsContainer指定的区域
});
myDropzone.on("addedfile", function(file) {
// 让模版中的单个文件可以点击上传
file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});
// 显示所有文件整体上传进度1-100
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function(file) {
// 显示整体的上传的进度条,说明:原来是0,所以上面的style.width = progress + "%"即使是100%也看不到
document.querySelector("#total-progress").style.opacity = "1";
// 失效上传按钮
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// 当没有文件上传时,隐藏进度条
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
// 上传所有
document.querySelector("#actions .start").onclick = function() {
myDropzone.enqueueFiles(myDropzone.getAcceptedFiles());
//myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));与上面一样,可查看源码对比
};
//取消所有
document.querySelector("#actions .cancel").onclick = function() {
myDropzone.removeAllFiles(true);
};
第二种效果与默认的一样
Flask upload with Dropzone example
Dropzone.autoDiscover = false;//解决两次实例Dropzone错误,可在控制台看到该错误
$("#myId").dropzone({
url: "{{ url_for('upload_file') }}",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024,
previewTemplate: $('#preview-template').html(),//如果去掉该选项就会使用默认的
autoQueue: true,
init: function() {
this.on("addedfile", function(file) {
$(".start").click (function() {
this.enqueueFile(file);
})
});
}
});
demo文件
如果是flask框架可进行测试点击此处下载,如果是php或者其他就看看不必下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
dropzone.js应用java_使用Dropzone.js上传的示例代码相关推荐
- php dropzone.js中文教程,使用Dropzone.js上传的示例代码
本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dro ...
- dropzone.js应用java_拖拽文件上传(Java篇)dropzone.js的简单使用
java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. dropzonejs 的官网是:http://www.dropzon ...
- jquery批量上传图片 java_简单多图片上传 jquery+java 代码
/** 添加歌曲 */ function addSong(){ var id=$("#_activity_id").val(); window.location.href = &q ...
- java awt文件上传_springMVC实现前台带进度条文件上传的示例代码
项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用HTML5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置 ...
- hibernate+servlet+mysql 实现easypoi_在Maven项目中使用easypoi完成Excel文件上传下载(示例代码)...
导包: 1 2 3 cn.afterturn 4 easypoi-base 5 3.2.0 6 7 8 cn.afterturn 9 easypoi-web 10 3.2.0 11 12 13 cn. ...
- php上传视频文件代码,PHP视频文件上传完整示例代码
这里有新鲜揭晓的PHP面向对象编程,程序猫速率看过来! PHP开源脚本语言PHP(外文名: Hypertext Preprocessor,中文名:"超文本预处理器")是一种通用开源 ...
- php手机端多图预览上传,JS实现多图预览上传的实例代码
这篇文章主要介绍了JS实现多张图片预览同步上传功能的相关资料,需要的朋友可以参考下 废话不多说了,直接给大家贴代码了,具体代码如下所示: /** * Created by liujing on 201 ...
- Bootstrap fileinput.js,最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- JS调用摄像头、实时视频流上传(一次不成功的试验)
JS调用摄像头.实时视频流上传(一次不成功的试验) 思路 前端调用摄像头,获取视频流,从视频流中取一帧转图片,用websocket上传图片. 研究了一下发现了WebRTC这种技术,看到有博客说一些直播 ...
最新文章
- 深入浅出根据函数调用过程谈栈回溯原理
- redminote8自动关机怎么回事_红米Note8Pro手机值得入手吗 红米Note8Pro手机全面评测...
- 深度学习简介(一)——卷积神经网络
- 利用request库请求api
- 你的目的是什么是谁指使你_零基础是一种回归初心的思考:写作的目的是什么?怎么写?写谁?...
- 人工智能知识体系的学习路线(南京大学人工智能学院本科生培养体系)
- idea设置背景护眼色
- 经济学入门书籍选择参考(业余爱好者)
- win10电脑任务栏右侧小图标消失解决方法
- TortoiseGit 使用教程
- 学习GIT的一个小游戏
- 采用预训练模型来训练新的模型
- Java 开发工程师 面试题(一)
- 微众银行七年,从拓荒者到深耕者
- amazeUI 地区选择器三级联动,带地区数据
- 在线直播源码中直播间内大转盘功能的实现
- 大学生综合测评系统(C++)
- 36. 有效的数独(javascript)36. Valid Sudoku
- Commonly Used Afx Functions
- Andriod 显式启动、隐式启动练习简析
热门文章
- 笔记本win10安装cuda11.4+cuDNN+pytorch(gpu)
- 计算机组成原理(3)三级存储 局部性原则 存储器性能指标 扩展 DRAM编址方式 cache 三种映射 替换策略
- 计算机应用笔试题及答案,计算机应用基础笔试试题及答案
- 北京理工大学计算机实验四报告表,北京理工大学数据结构实验报告实验四
- 信息化解决看病挂号难便民利民有待提高
- go语言和python有什么区别_go语言和python有什么区别?
- Vue3 父子组件传值 ts
- Jmeter生成的jtl文件用命令转换成html报告
- 文科生学Python,为了什么?
- python包_3_随机函数— random包