`
阅读更多

原文链接: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!

分享到:
评论

相关推荐

    drag and drop js拖拽实现,分页排序tables

    虽然可以手动实现所有这些功能,但有许多优秀的JavaScript库如jQuery UI、interact.js或Sortable.js可以帮助简化工作。例如,Sortable.js可以轻松实现拖放排序,同时支持分页: ```javascript new Sortable...

    dotnet附件上传

    7. **前端库支持**: 虽然可以手动实现这些功能,但使用现成的库如jQuery File Upload、Dropzone.js等,可以简化开发工作,提供更丰富的功能和更好的兼容性。 在"fileuploadfor163"这个文件中,可能包含了实现上述...

    Drag-File-Uploader

    这个功能在现代Web应用中非常常见,为用户提供了一种直观且方便的方式来提交他们的文件。下面我们将深入探讨实现这一功能所涉及的核心技术和知识点。 首先,HTML5是实现拖放功能的基础。HTML5引入了一系列新的API,...

    django-upload-file-demo

    6. **JavaScript 库**:为了更好地处理文件上传,开发者通常会使用像 jQuery 或者专门的库(如 Dropzone.js、Resumable.js)来简化工作,提供更好的用户体验,如拖放上传、多文件上传、进度条等。 7. **安全性**:...

    react-netlify-form-file

    在`src`中的`App.js`文件中,我们可以看到如何使用React Hooks和React Dropzone来实现文件上传。`useState`用来创建和更新文件状态,`useEffect`则可能用于在文件上传后触发某些动作,如显示上传成功消息。React ...

Global site tag (gtag.js) - Google Analytics