官网地址:http://www.dropzonejs.com/

一,它是什么:

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

它是一个开源的带图片预览的可拖拽上传图片的插件。

它具有轻量、不依赖其他库(诸如jQuery)的特点,同时很方便自定义。

二,简单使用:

这里之所以引用了jQuery并不是因为这个插件依赖jQuery,而是因为后文使用的语法,有一些是基于jQuery的。

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="dist/dropzone.css" />
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="dist/dropzone.js"></script>
</head> <body>
<div class="dropzone" id="myDropzone">
<div class="am-text-success dz-message">
将文件拖拽到此处<br>或点此打开文件管理器选择文件
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
url: "127.0.0.1",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024,
sending: function(file, xhr, formData) {
formData.append("filesize", file.size);
},
success: function(file, response, e) {
var res = JSON.parse(response);
if(res.error) {
$(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
}
}
});
</script>
</body> </html>

这样,一个基础的基于Dropzone的文件拖拽上传就完成了。我对这段代码的理解是,这里的拖拽上传,拖拽和上传是连在一起的,拖拽完成,插件会自动上传文件到你指定的URL中。

例子中,我们使用的是非文件域输入框,如果使用type=file类型的input,则可以

而实际场景中,也有一些场合是需要这两个步骤分开完成的,也就是说,拖拽只是把文件放到规定区域内,当单击了上传按钮后,才真的上传文件。这样可以避免用户频繁更换图片而导致的频繁请求。

也有一些场景,上传图片的同时,我们还需要一起提交一些额外的其他数据,比如用户标识等等。因为我们需要区别不同用户上传的照片,也许需要把它们分开处理。

如果使用Dropzone,这两种情况分别该怎么处理呢?

先说第一种,有一种情况下,图片是被转化成二进制数据后上传的。我们假设这里的情况,就是这样,那么,我们希望,用户在单击或者拖拽时,先得到图片的二进制数据,但是,不要上传,当用户单击提交时,再讲这些内容发送到URL中,进行存储。单击之前,每次用户改变图片,本地的二进制数据也随之改变。那么,Dropzone有没有这个机制呢,将获取文件和上传文件分开操作?目前思路是,它有两个方法,分别管理这两个过程,我们可以在方法里进行处理,待查询。

再说第二种,上传图片数据的同时,要附加上传图片上传者的相关信息,-也就是说上传图片的同时,需要提交一些额外的数据。formdata可以通过append添加数据这是一种思路,待验证。

题外话:经常使用图片上传,但是很少仔细的想过图片上传的逻辑。总是以为用户单击上传了,整个过程就完成了。所以,很多东西总是想不通。通过总结Dropzone的使用,顺带也把图片上传逻辑简单理了下。下面,从用户开始上传,一直到下一次用户端调用,做个简单的流程说明:

1.用户通过拖拽或者单击等把图片放到上传框中

2.图片被发送到后台,存储在特定区域,一般情况下,还会系统的生成唯一名称。这个时候,只是图片被重命名后存到了某个存储区里面,它并不能够在数据库中被找到,因为数据库中没有它的相关信息。

3.(一般是通过用户单击提交等操作)图片信息以及其他相关信息,一起被提交到后台,存入数据库。此时,图片的信息才可以通过种种条件筛选等,被查询到,进而被使用。

4.在前端需要调取用户已经上传的图片时,后端从数据库读出图片信息(路径等可以找到图片的信息),前端还原到页面image元素的src属性中。

5.后台图片存储区的图片,显示在页面上。

dropzone.js使用实践的更多相关文章

  1. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  2. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  3. Vue.js最佳实践

    Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...

  4. 上传插件dropzone.js实例

    dropzone.js默认是Ajax上传图片给服务器,那么如何获取到图片名呢?其实我们是可以通过dropzone的success函数获取到服务器返回的数据 dropzone.js在HTML的配置如下: ...

  5. require.js 最佳实践【转】

    https://www.cnblogs.com/digdeep/p/4607131.html require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(re ...

  6. require.js 最佳实践

    require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(require.js), Javascript模块化工具require.js教程,RequireJ ...

  7. struts整合dropzone.js上传图片遇到的点问题

    问:struts后台无法获取文件对象和文件名称? 答:1. 到dropzone.js搜索"return xhr.send(formData);" 2. 在它前面有个这么句代码: f ...

  8. JavaScript best practices JS最佳实践

    JavaScript best practices JS最佳实践 0 简介 最佳实践起初比较棘手,但最终会让你发现这是非常明智之举. 1.合理命名方法及变量名,简洁且可读 var someItem = ...

  9. django + dropzone.js 上传文件

    1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...

随机推荐

  1. python学习笔记1——基础

    1)注释 单行注释以#开头,例:#第一个注释 多行注释可用多个#号,还有'''和""",例: #第一行注释 #第二行注释 ''' 第三行注释 第四行注释 ''' &quo ...

  2. 在Winform混合式框架中整合外部API接口的调用

    在我们常规的业务处理中,一般内部处理的接口多数都是以数据库相关的,基于混合式开发的Winform开发框架,虽然在客户端调用的时候,一般选择也是基于Web API的调用,不过后端我们可能不仅仅是针对我们 ...

  3. W班-项目选题报告成绩

    作业链接 https://edu.cnblogs.com/campus/fzu/FZUSoftwareEngineering1715W/homework/907 作业要求 1份团队选题报告(word电 ...

  4. 第2次作业:软件分析之Steam

    1. 作业内容 1.1 介绍产品相关信息 你选择的产品是? 我选择的分析的软件为STEAM 为什么选择该产品作为分析? 在上述列表中的产品,除了王者荣耀,其他几项都是平时我使用较为频繁的软件,所以最初 ...

  5. [高级软件工程教学]团队Beta阶段成绩汇总

    一.作业地址: https://edu.cnblogs.com/campus/fzu/AdvancedSoftwareEngineering/homework/1501 二.Beta冲刺课堂答辩 1. ...

  6. 听翁恺老师mooc笔记(8)--字符串2

    字符串的赋值 字符串的输入与输出 对C语言的基础类型,比如int.double等类型,scanf.printf有专门的格式转换,而对字符串,scanf.printf使用%s格式字符进行输入与输出.当使 ...

  7. Python2.x的编码问题

    1. 计算机编码历史 ASCII Python的默认编码,其是一种单字节的编码.刚开始计算机世界里只有英文,而单字节可以表示256个不同的字符.最开始ASCII只定义了128个字符编码,包括96个文字 ...

  8. 20162323周楠《Java程序设计与数据结构》第六周总结

    学号 2016-2017-2 <程序设计与数据结构>第六周学习总结 教材学习内容总结 继承:从已有类派生一个新类,是面向对象程序设计的一个特点 在Java中只支持单继承,不支持多继承 继承 ...

  9. UIImage 内存细节

    最近的一个项目,有大量的scrollView+imageView,当iPad启动较多程序,再启动自己的这个程序的时候,就爆内存退出了-- 后来把所有的生成图片的方法,全部由imageNamed改成了i ...

  10. Telnet、SSH和VNC 区别

    Telnet Telnet是进行远程登录的标准协议,它是当今Internet上应用最广泛的协议之一.它把用户正在使用的终 端或计算机变成网络某一远程主机的仿真终端,使得用户可以方便地使用远程主机上的软 ...