dropzone.js使用实践

Posted 喜欢的事用心去做

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了dropzone.js使用实践相关的知识,希望对你有一定的参考价值。

官网地址: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使用实践的主要内容,如果未能解决你的问题,请参考以下文章

如何从 dropzone.js 上传和删除文件

如何仅使 Dropzone.js 预览 Div 可点击而不是整个表单

加载Dropzone.js与Require.js

Dropzone.js中的处理事件

如何使用 dropzone.js 和 hapi.js 上传图片

使用 Dropzone.js 的非 ajax 帖子