dropzone.js 文件过滤和添加删除链接答案

【问题标题】：dropzone.js file filtering and adding remove linkdropzone.js 文件过滤和添加删除链接
【发布时间】：2016-08-24 12:50:28
【问题描述】：

我正在使用 dropzone.js 将文件上传到服务器，对此我很陌生；我寻找了类似的问题和答案，但找不到任何解决方案。我使用的是 dropzone 4.3 版，我想在上传之前为每个文件添加取消链接，以删除选定的文件以及图像 pdf 和 doc 文件的文件过滤器。

这是我的代码

<form action='control/upload.php' class = "dropzone" id = 'my-dropzone"></form>
<button id ='file_sub'>upload</button>

js -

Dropzone.autodiscover = false;
Dropzone.options.my-dropzone = {
   autoProcessQueue:false,
   addRemoveLinks:true,
   acceptedFiles:".png,.jpg,.jpeg,.gif,.bmp,.doc,.docx,.pdf",
   init:function(){
      this.addRemoveLink=true;
   }
};

$ ('#file_sub').click (function (){my-dropzone.processQueue});

但是都不起作用，文件会自动发送，任何文件都可以上传，删除链接不出现。

【问题讨论】：

标签： javascript php html dropzone.js

【解决方案1】：

您的代码中有一些拼写错误，例如第一个 Dropzone.autodiscover 是 Dropzone.autoDiscover 请注意“D”，此外，如果您正在设置选项，则不需要将 autoDiscover 设置为 false。

要设置选项，您必须调用 html 元素的骆驼标识，在本例中为 myDropzone 而不是 `my-dropzone´，这是您的脚本无法正常工作的主要原因，因为 dropzone 加载默认选项。您还需要设置事件侦听器以在 init 函数中上传文件。在这里你可以看看正确的语法：

html:

<form action="control/upload.php" class="dropzone" id="my-dropzone"></form>
<button id="file_sub">upload</button>

js:

Dropzone.options.myDropzone = {
    autoProcessQueue:false,
    addRemoveLinks:true,
    acceptedFiles:".png,.jpg,.jpeg,.gif,.bmp,.doc,.docx,.pdf",
    init: function() {
        var myDropzone = this;
        $('#file_sub').click(function(){
            myDropzone.processQueue();
        });
    }
};

【讨论】：

感谢它运行良好，但我注意到现在它每次点击只发送两个文件我已经检查了文件大小并不大，我没有对文件数量或大小设置任何限制。有没有办法修好吗？
@NatnaelGetachew，是的，这是 dropzone 的默认行为。要允许一次上传超过 2 个文件，您需要将并行上传限制添加到选项中，默认情况下这是 2，比如说parallelUploads: 10。
是的，我对并行上传限制很好，但是当两者完成上传后，它不会继续到下一个未上传的文件，直到我再次点击上传
@NatnaelGetachew，是的，他们不会继续上传，因为限制为 2，并且autoProcessQueue 设置为 false，因此您必须通过按下按钮手动重新启动上传，有几种解决方法为此，但一次上传所有文件的最简单方法是将parallelUploads 限制增加到比您期望上传的文件数大的数字，然后所有文件都会一次上传。

【解决方案2】：

Dropzone 的文档在某些方面有些欠缺。一年多前我解决了这个问题，但我记得有类似的问题。这是我在一个页面上进行的初始化，它基本上可以完成您想要做的事情。

var previewNode = document.querySelector("#preview-template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var acceptedFilesList = ".flv, .mp4, .jpg, .jpeg, .gif, .png, .doc, .docx, .pdf, .xls, .xlsx, .ppt, .pptx, .txt";

myDropzone = new Dropzone(document.body, {
        url: "[url to post to]",
        clickable: "[id$=dropzone-clickable]", // Make dropdown menu item clickable for uploads
        previewTemplate: previewTemplate, // Use the previewTemplate div from markup to generate html in the modal for each file added
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        paramName: "UploadImage", // The variable name of the uploaded file on submit
        acceptedFiles: acceptedFilesList
        });

previewTemplate 是一组标记，用于显示有关用户尝试上传的每个文件的信息。 Dropzone 的文档实际上很好地解释了 previewTemplate 以及如何自定义它。

然后我在“addedfile”上使用事件监听器来自定义预览行：

myDropzone.on("addedfile", function (file) {
    /* added logic for setting up the preview row, 
    investigate the file object within this to see what you can do */
});

最后，我有一个按钮开始上传（在 dropzone 术语中，将所有已添加的文件排入队列）：

$(".btn-start-all").on("click", function () {            
    var addedFiles = myDropzone.getFilesWithStatus(Dropzone.ADDED);
    addedFiles.forEach(function (upload) {
        myDropzone.enqueueFile(upload);
    });
});

这是我所拥有的一种精简/裸露的版本，但希望它能成为您完成所需工作的一个很好的参考

【讨论】：