`
阅读更多

原文链接:Upload all files with a button

This tutorial shows how to let the user build a queue and then upload all files with a single button click.

First off the HTML:

<button id="submit-all">Submit all files</button>
<form action="/target" class="dropzone" id="my-dropzone"></form>

and the JS:

Dropzone.options.myDropzone = {

  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,

  init: function() {
    var submitButton = document.querySelector("#submit-all")
        myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    });

    // You might want to show the submit button only when 
    // files are dropped here:
    this.on("addedfile", function() {
      // Show submit button here and/or inform user to click it.
    });

  }
};

That's it!

分享到:
评论

相关推荐

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

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

    dropzone.js和css下载

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

    dropzone.js 实现拖拽上传文件

    Dropzone.js 是一个开源的 JavaScript 库,专为创建具有美观界面和易用性的文件上传功能而设计。它支持HTML5的拖放功能,允许用户通过简单地将文件拖放到指定区域来实现文件上传,极大地提升了用户体验。在这个例子...

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

    5. 对于form表单上传区的配置,基本上与上面提到的配置方法相同,需要注意的是,form标签内的配置对于Dropzone.js来说是透明的,因此配置主要集中在JavaScript代码中。 以上步骤和代码片段展示了如何通过Dropzone....

    dropzone.js

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

    dropzone-laravel-image-upload, Laravel 5.2和 Dropzone.js 自动图像上传,带有删除链接.zip

    dropzone-laravel-image-upload, Laravel 5.2和 Dropzone.js 自动图像上传,带有删除链接 Laravel 5.2和 Dropzone.js 自动图像上传,带有删除链接这个项目与来自 Codingo Tuts的教程相关。这里项目中包含的内容包括...

    MVC使用Dropzone.js上传

    1. **引入资源**:在视图(View)页面的头部添加Dropzone.js的CSS和JavaScript文件。通常,这些文件可以从CDN获取,或者你也可以将其下载到本地项目中。 2. **配置Dropzone**:在HTML中定义一个`&lt;div&gt;`元素,作为...

    FileUpload:使用Dropzone.js上传Asp.Net Core API文件

    上传文件使用Dropzone.js 上传的Asp.Net Core Razor Pages文件教程有关分步教程的信息,请访问项目页面内容 : 使用dropzone.js实现文件上传的ASP.Net Core Razor项目功能: 拖放式上传列出服务器内容删除文件下载...

    基于django和dropzone.js实现上传文件

    1、dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2、dropzone.js前端界面上传方式 官网下载 并且引入dropzone.js和dropzone.css...

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

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

    使用uploadify插件(php版和Java版) 与 Dropzone.js插件分别实现附件上传的demo

    使用uploadify插件(php版和Java版) ...2. 使用Dropzone.js插件实现附件上传; 3. 两种上传方式都是拿来即用,不用做任何修改,下载项目导入到工作空间启动就可测试看效果; 4. 具体实现效果可以看我博客里对应的文章;

    拖放文件上传与图像预览插件Dropzone.js

    **拖放文件上传与图像预览插件Dropzone.js** Dropzone.js是一款高效且轻量级的JavaScript库,专门用于实现HTML元素上的拖放文件上传功能。它将这些元素转化为可拖放区域,允许用户方便地通过Ajax方式将文件上传到...

    vue-dropzone:Dropzone.js的Vue.js组件-具有图像预览功能的拖放文件上传实用程序

    Vue-Dropzone 想要的共同维护者该组件远远超出了我的最初期望,并且我无法提供用户所需的支持量。 如果您想在维护方面有所帮助, 由驱动的用于文件上传的Vue组件。 。 在和可以找到与Nuxt SSR兼容的组件。 感谢 ...

    DropZone上传图片所需的资源

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

    SpringMVC+dropzone实现图片上传

    Spring MVC是Spring框架的一部分,专门用于构建Web应用程序,而Dropzone.js则是一个轻量级的JavaScript库,提供了简单易用的拖放文件上传界面。让我们逐步解析这个上传模块的构建过程。 首先,我们需要在项目中引入...

    React-Dropzone-Component:用于文件上传的ReactJS Dropzone(使用Dropzone.js)

    适用于React的Dropzone.js组件 :warning: 维护者想要! 我一直无法使该组件保持最新状态,因此很乐意将密钥移交给确实有人使用。 一个用于ReactJS的Dropzone组件,允许用户将文件“拖放”到上载区域。 该组件使用...

    dropzone 拖动上传

    Dropzone.js 是一个开源的JavaScript库,专门用于实现网页上的拖放上传功能。它使得创建具有用户友好界面的文件上传区域变得极其简单,允许用户通过简单的拖放操作将文件从桌面或其他位置上传到服务器。在现代Web...

Global site tag (gtag.js) - Google Analytics