常识 共享 合作 bodog官网

    bodog官网专心于网页资料下载,供给博狗博彩、网页规划、ps资料、图片资料等,服务于【个人站长】【网页规划师】和【web开发从业者】的代码资料与规划资料网站。

    bodog官网供给网页资料下载、博狗博彩
    常识 共享 合作!

    文件拖拽上传插件dropzone.js

    作者:佳明妈 来历:郑州网站规划 2016-11-09 人气:
    文件拖拽上传插件dropzone.js,供给 AJAX 异步文件上传功用,支撑拖拽文件上传、支撑最大文件巨细、支撑设置文件类型、支撑预览上传成果,不依赖jQuery库。

    文件拖拽上传插件dropzone.js,供给 AJAX 异步文件上传功用,支撑拖拽文件上传、支撑最大文件巨细、支撑设置文件类型、支撑预览上传成果,不依赖jQuery库。

    文件拖拽上传插件dropzone.js的运用

    树立一个正式的上传form表单,而且给表单一个.dropzone的class

    <form id="mydropzone" action="/upload.php" class="dropzone"></form>

    就这样,Dropzone会主动找到.dropzone的表单form元素,而且经过action特点,上传到后台接纳文件的程序,如upload.php,就像承受一个很一般的file input表单:

    <input type="file" name="file" />

    然后,在你的upload.php中写上传代码,Dropzone官网下载的只要js代码,没有后台的上传代码,不过,helloweba.com为您供给了php版的完好上传实例代码,欢迎下载源码。

    引进dropzone.js

    <script src="dropzone.min.js"></script>

    然后什么都不用做了,翻开浏览器,测验拖拽上传作用。当然款式你能够自己写,也能够参照咱们的实例代码。

    还有一种状况,咱们不期望上传的html中有form表单,那么好,咱们只要在html中放置一个div#mydropzone

    <div id="mydropzone" class="dropzone"></div>

    装备一下js调用

    var myDropzone = new Dropzone("div#mydropzone", { url: "upload.php"});

    假如您运用的是jquery,那么jQuery版的能够这样调用:

     $("#dropz").dropzone({ 
        url: "upload.php" 
     })

    运转你的网页,是不是相同能够看到上传作用。

    装备Dropzone

    Dropzone的特征就在于十分灵敏,供给了许多可选项、事情等。下面是Dropzone几个常用的装备项。

    url:最重要的参数,指明晰文件提交到哪个页面。

    method:默以为post,假如需求,能够改为put。

    paramName:相当于<input>元素的name特点,默以为file。

    maxFilesize:最大文件巨细,单位是 MB。

    maxFiles:默以为null,能够指定为一个数值,约束最多文件数量。

    addRemoveLinks:默许false。假如设为true,则会给文件增加一个删去链接。

    acceptedFiles:指明答应上传的文件类型,格局是逗号分隔的 MIME type 或许扩展名。例如:image/*,application/pdf,.psd,.obj

    uploadMultiple:指明是否答应 Dropzone 一次提交多个文件。默以为false。假如设为true,则相当于 HTML 表单增加multiple特点。

    headers:假如设定,则会作为额定的 header 信息发送到服务器。例如:{"custom-header": "value"}

    init:一个函数,在 Dropzone 初始化的时分调用,能够用来增加自己的事情监听器。

    forceFallback:Fallback 是一种机制,当浏览器不支撑此插件时,供给一个备选计划。默以为false。假如设为true,则强制 fallback。

    fallback:一个函数,假如浏览器不支撑此插件则调用。

    翻译选项

    • dictDefaultMessage:没有任何文件被增加的时分的提示文本。

    • dictFallbackMessage:Fallback 状况下的提示文本。

    • dictInvalidInputType:文件类型被回绝时的提示文本。

    • dictFileTooBig:文件巨细过大时的提示文本。

    • dictCancelUpload:撤销上传链接的文本。

    • dictCancelUploadConfirmation:撤销上传承认信息的文本。

    • dictRemoveFile:移除文件链接的文本。

    • dictMaxFilesExceeded:超越最大文件数量的提示文本。

    增加事情监听

    假如你期望在一个事情发作时采纳一些额定的操作,而不搅扰 Dropzone 的默许行为,那么你应该经过增加事情监听器的办法对事情做出呼应,而非重写默许事情函数。

    重写默许事情函数的比如如下:

    $("#dropz").dropzone({
        addedfile: function() {
            // actions...
        }
    });

    假如你重写默许事情函数,该事情发作时插件默许采纳的动作将被掩盖。大多数状况下你只是想在事情发作时增加自己的行为,那么应该运用on办法。

    jQuery 版别:

    $("#dropz").dropzone({
        init: function() {
            this.on("addedfile", function(file) {
                // actions...
            });
        }
    });

    非 jQuery 版别:

    dropz.on("addedfile", function(file) {
        // actions...
    });

    常用事情

    以下事情接纳 file 为第一个参数

    • addedfile:增加了一个文件时发作。

    • removedfile:一个文件被移除时发作。你能够监听这个事情并手动从服务器删去这个文件。

    • uploadprogress:上传时按必定间隔发作这个事情。第二个参数为一个整数,表明进展,从 0 到 100。第三个参数是一个整数,表明发送到服务器的字节数。当一个上传结束时,Dropzone 确保会把进展设为 100。留意:这个函数或许被以同一个进展调用屡次。

    • success:文件成功上传之后发作,第二个参数为服务器呼应。

    • complete:当文件上传成功或失利之后发作。

    • canceled:当文件在上传时被撤销的时分发作。

    • maxfilesreached:当文件数量到达最大时发作。

    • maxfilesexceeded:当文件数量超越约束时发作。

    以下事情接纳一个 file list 作为第一个参数(仅当uploadMultiple被设为true时才会发作)

    • successmultiple

    • completemultiple

    • cancelmultiple

    特别事情

    • totaluploadprogress:第一个参数为总上传进展,第二个参数为总字节数,第三个参数为总上传字节数。

    比如

    这儿我运用上面的选项、事情等写了一个比如,供参阅:

    <div class="dropz"></div>
    <script>
        $(".dropz").dropzone({
            url: "handle-upload.php",
            addRemoveLinks: true,
            dictRemoveLinks: "x",
            dictCancelUpload: "x",
            maxFiles: 10,
            maxFilesize: 5,
            acceptedFiles: ".js",
            init: function() {
                this.on("success", function(file) {
                    console.log("File " + file.name + "uploaded");
                });
                this.on("removedfile", function(file) {
                    console.log("File " + file.name + "removed");
                });
            }
        });
    </script>

    外观

    Dropzone 下载之后没有自带任何 CSS 款式(人家只要一个 js 文件嘛)。我觉得官网供给的 Demo 的外观规划就十分不错,能够供咱们参阅。

    其他教程

    Dropzone 的作者在插件的 GitHub Wiki 页面上供给了许多额定教程,十分好,也引荐咱们看一看。

    这儿我只翻译一部分我觉得常用的教程的标题:

    1. 怎么显现服务器回来的错误信息?

    2. 怎么在一切文件上传完毕时得到告诉?

    3. 怎么显现出现已保存在服务器上的文件?

    4. 自己完成删去文件时的提示功用

    5. 为文件供给自定义缩略图

    6. 点击一个按钮再上传一切文件

    7. 点击一个按钮删去一切文件

    8. 把 Dropzone 放到一个已存在的表单中

    更多有关Dropzone的信息请参阅官网:http://www.dropzonejs.com/
    原文:http://www.helloweba.com/view-blog-393.html


    ↓ 检查全文

    文件拖拽上传插件dropzone.js由bodog官网收集整理,您能够自在传达,请主动带上本文链接

    bodog官网便是免费共享,觉得有用就多来支撑一下,没有能帮到您,懒人也只能表明遗憾,期望有一天能帮到您。

    文件拖拽上传插件dropzone.js-最新谈论

    • 高仿包包 2017-03-21 09:09:44
      [bofu灰心丧气]原单[bofu灰心丧气] Valentino(华伦天奴) Juicy Couture (橘滋) Noble Family(贵族世家) ?? ??(美丽公主) CASIO(卡西欧) CHANEL(香奈儿) shechipin.ga