`

Dropzone JS 使用指南(文件拖拽上传)

 
阅读更多
JavaScript 文件拖拽上传插件 dropzone.js 介绍 https://www.renfei.org/blog/dropzone-js-introduction.html
DropzoneJS 使用指南(文件拖拽上传)  http://www.open-open.com/lib/view/open1448610841329.html
带文件上传的form表单提交 http://m.blog.csdn.net/article/details?id=50221945

后台资料:
基于Spring MVC的Web应用开发(4) - FileUpload http://stephansun.iteye.com/blog/1458980

使用例子
$("#dropzone2 .dropzone").dropzone({
            headers: {},
            paramName: "file", // The name that will be used to transfer the file
            maxFiles: 1,
            maxFilesize: 10.5, // MB
            addRemoveLinks: true,
            //acceptedFiles: ".jpg,.png,.gif,.mp3",
            acceptedFiles: ".jpg,.png,.gif",
            dictRemoveFile: "删除",
            dictMaxFilesExceeded: "只能上传{{maxFiles}}个",
            dictInvalidFileType:"无效文件",
            dictCancelUpload:"取消上传",
            dictDefaultMessage: '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> Drop files</span> to plupload \
                <span class="smaller-80 grey">(or click)</span> <br /> \
                <i class="plupload-icon icon-cloud-plupload blue icon-3x"></i>'
            ,
            dictResponseError: '上传出现错误',
            previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
            success: function (q, context, htx) {
                console.log($.toJSON(context));
                DropzoneUploadFiles2 = context;
                return q.previewElement.classList.add("dz-success")
            },
            removedfile: function (file) {
                console.log("File " + file.name + "被删除");
                var r;
                if ((r = file.previewElement) != null) {
                    r.parentNode.removeChild(file.previewElement)
                }
                return this._updateMaxFilesReachedClass()
            },
            init: function () {
                var myDropZone = this;
                $("#btnRemoveAll2").unbind("click").removeAttr("onclick").click(function () {
                    console.log("removeAllFiles");
                    myDropZone.removeAllFiles();
                });
                //最好在这里做这些事情
                this.on("addedfile", function(file) { alert("Added file."); });
                this.on("complete", function(file) { alert("complete file."); });
            }

        });


如何清除所有文件
$(function() {
            Dropzone.options.myAwesomeDropzone = { 
            init: function () {
                var myDropZone = this;
                //自定义一个隐藏按钮给私下调用
                $("#btnRemoveAll").click(function () {
                            myDropZone.removeAllFiles();
                        }
                );
            }

        };
 });




附件是别人的一个后台例子
分享到:
评论

相关推荐

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

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果,不依赖jQuery库。 使用Dropzone 我们可以建立一个正式的上传form表单,...

    dropzone.js 实现拖拽上传文件

    在这个例子中,我们将深入探讨如何使用 Dropzone.js 实现拖拽上传文件,并涉及相关的前端技术和最佳实践。 首先,我们需要在 HTML 页面中设置一个元素作为 Dropzone 的区域。通常,我们选择 `div` 元素,并为其添加...

    dropzone前段文件上传所需文件

    Dropzone 是一个强大的前端文件上传库,主要基于 jQuery 和 JavaScript 技术,为用户提供了一种简单易用且具有视觉吸引力的文件上传体验。这个库特别适用于需要处理多文件上传和单文件上传的Web应用程序,其设计简洁...

    MVC使用Dropzone.js上传

    在本主题“MVC使用Dropzone.js上传”中,我们将重点讨论如何在基于MVC架构的Web应用中集成Dropzone.js,这是一个强大的、开源的文件上传库,支持拖放功能和批量上传。Dropzone.js以其简单易用和高度自定义的特点,...

    Dropzone.js实现文件拖拽上传功能(附源码下载)

    Dropzone.js是一个轻量级的JavaScript库,专为实现文件拖拽上传功能而设计。它允许用户通过简单地将HTML元素(通常是`&lt;form&gt;`或`&lt;div&gt;`)标记为`.dropzone`类,创建一个可拖放的区域,用户可以直接在该区域内拖放...

    dropzone 拖动上传

    实现"dropzone 拖动上传",你需要在HTML文件中设置一个元素作为Dropzone区域,然后在JavaScript中初始化Dropzone对象。例如: ```html &lt;div id="myDropzone" class="dropzone"&gt; ``` ```javascript Dropzone....

    DropZone上传图片所需的资源

    - `dropzone.js`:这是DropZone的主要JavaScript文件,包含了所有用于处理文件上传的核心代码。通过在HTML页面中引入此文件,你可以启用DropZone的功能。 - `dropzone.min.js`:这是经过压缩和优化的版本,适用于...

    使用dropzone上传附件实例

    `Dropzone`是一个优秀的JavaScript库,专门用于简化文件上传操作,特别是大文件的分块上传。这个实例是关于如何在项目中集成`Dropzone`来实现附件上传功能的。下面我们将深入探讨`Dropzone`的使用、文件上传的基本...

    文件的拖拽Dropzone

    【标题】:“文件的拖拽Dropzone”是一个与Vue.js框架相关的技术主题,它涉及到前端开发中的文件上传功能,特别是通过拖放操作实现文件的便捷上传。Dropzone是一种流行的JavaScript库,它允许用户通过简单的拖放操作...

    dropzone.js和css下载

    Dropzone.js是一款强大的JavaScript库,专门用于实现拖放上传功能,尤其在网页上创建直观、用户友好的文件上传体验方面表现出色。这个库利用HTML5的拖放API,使得文件上传变得简单易行,同时也提供了丰富的自定义...

    dropzone上传插件demo

    该压缩包属于java-web使用dropzone文件上传插件进行文件上传的一个完整小测试项目,代码简单易懂,而且写的非常详细,很适合小白/大白以之作为参考,项目里面已经有dropzone.js以及dropzone.css了。

    vuedropzone一个拖动文件上传的Vuejs组件支持图片预览

    Vue Dropzone是一个基于Vue.js框架的开源组件,用于实现便捷的文件上传功能,特别是对于图片预览有着良好的支持。在JavaScript开发中,Vue.js是一个非常流行的前端框架,它以其轻量级、易学习和可复用组件的特点受到...

    使用Dropzone.js上传的示例代码

    本文将介绍如何使用Dropzone.js来实现文件上传功能。 首先,需要在前端页面引入Dropzone.js和Dropzone的CSS样式。通常情况下,我们会从CDN或者静态资源服务器获取这两个文件。在本例中,使用了Python的Flask框架...

    dropzone上传

    dropzone 用于文件上传。支持拖拽上传,选择上传,包括各种类型文件

    dropzone上传文件结合SpringMVC

    Dropzone.js是一个轻量级的JavaScript库,它为用户提供了一个直观的拖放界面,使得文件上传变得简单易用。而Spring MVC是Java领域广泛应用的MVC框架,提供了强大的数据处理和业务逻辑支持。 首先,我们需要在项目中...

    asp.net使用dropzone上传csv文件,采用aspose.cell处理

    首先,**Dropzone.js**是一个开源的JavaScript库,它为网页提供了一种美观且易于使用的拖放区域,使得用户可以方便地进行文件上传。在ASP.NET应用中,我们可以将Dropzone集成到页面中,设置相关的配置参数如上传URL...

    dropzone.js

    好用的dropzone文件上传,简单易用。支持异步文件上传

Global site tag (gtag.js) - Google Analytics