Question

我正在使用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});

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

Answer 1

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以及如何自定义它。

然后我在＆＃34; addedfile＆＃34;上使用了一个事件监听器。自定义预览行：

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);
    });
});

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

Answer 2

您的代码中有一些拼写错误，例如第一个Dropzone.autodiscover Dropzone.autoDiscover注意'D'，此外如果您设置选项，则无需将autoDiscover设置为false。

要设置选项，你必须调用html元素的camelized id，在这种情况下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();
        });
    }
};

dropzone.js文件过滤并添加删除链接

2 个答案: