Question

我使用Dropzone上传文件客户端。我已经使用JQuery以编程方式设置了Dropzone，我希望能够将其分离，以便用户无法再上传任何文件。我的理想解决方案是简单地使其无法点击，然后应用默认消息向用户表明他们已超过上传的数量。

这是一个简单的例子： http://www.dressorganic.co.uk/dropzone-test/turn-off-dropzone-after-load.htm

这里我尝试在成功事件之后使其无法点击但没有任何反应。

以下是成功上传后我真正希望看到的内容的链接： http://www.dressorganic.co.uk/dropzone-test/dropzone-disabled.htm

    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <title>Turn off Dropzone after load</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.js"></script>
    <link rel="stylesheet" href="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.css">

    <script type="text/javascript">
    //<![CDATA[
    $(function() {

       $("#upload1").dropzone({
          createImageThumbnails : false,
          url: "/dropzone-test/handleupload.asp",
          acceptedFiles : ".jpg,.jpeg,.png,.gif",
          dictDefaultMessage : "Click here or drag and drop files to upload",
          addRemoveLinks : false,
          success : function(file) {
             this.removeAllFiles();

             $("#upload1").dropzone({
                 clickable : false,
                 url: "/dropzone-test/handleupload.asp",
                 dictDefaultMessage : "You have exceeded the number of uploads, please remove existing to add more"
              });

          },
        });

    });  // JQuery
    //]]>
    </script>

    </head>

    <body>

        <div id="singleproductload">

            <div id="upload1" class="dropzone">

            </div>

        </div>

    </body>
    </html>

Answer 1

为什么不用另一个具有相同CSS的div替换或隐藏该元素。试试remove，replaceWith，show，hide或toggle

Answer 2

见How to limit the number of dropzone.js files uploaded?。如果您要允许用户在达到最大值后删除文件，则不希望销毁或隐藏重要的dropzone元素。

Answer 3

尝试删除并重新创建div容器以及destroy（）方法。可以使用新参数重新初始化Dropzone。

var url = 'myurl',
    dz

function createDrop(opt) {
    dz && dz.destroy()
    $('#dz_container').find('div').remove()
    $('<div>', {'class':'dropzone',id:'dz'}).appendTo($('#dz_container'))
    Dropzone.options.dz = opt
    dz = new Dropzone('div#dz', { url: url})
}

createDrop({dictDefaultMessage:'new message...'})

如何以编程方式分离Dropzone？

3 个答案: