【问题标题】:dropzone.js check for condition before querydropzone.js 在查询前检查条件
【发布时间】:2014-04-02 22:19:08
【问题描述】:

我正在使用 dropzone.js 上传图片。 在上传图片之前,有一个 html 选择列表,用户需要从中选择一个类别,以便 CGI 知道将它们放在哪里。

有没有办法让 dropzone 在上传之前满足条件,或者还有其他方法?

$(function() {          
            Dropzone.options.myAwesomeDropzone = {
       init: function () {
            var myDropZone = this;
            $("#btnRemoveAll").click(function () {
                        myDropZone.removeAllFiles();
                    }
            );
            $("#categories").change(function () {
                        myDropZone.removeAllFiles();
                    }
            );            
        },                          
              success: function(file,r){                            
                file.previewElement.classList.add("dz-success");        
                alert(r); // response from server
                // this.removeFile(file);    // remove file after upload                        

              },
              drop:function(){
                var tkn=getToken();
                $("#token").val(tkn);
                var c=$("#categories").val();
                $("#cat").val(c);
              },
              error: function(){
                ajaxError();
              },
              acceptedFiles: "image/jpeg"
            };

});     

html:

Category:<br>
<select id="categories">
    <option value="foo">Please choose</option>  
    <option value="cat1">cat1</option>  
    <option value="cat2">cat2</option>  
</select><br>

New category :<input type="text" id="category">

<form action="cgi/uploadfile.exe"
      class="dropzone"
      id="my-awesome-dropzone">
      <input type="hidden" id="token" name="token">
      <input type="hidden" id="cat" name="cat">
</form>     
<button id="btnRemoveAll">Clear Dropzone</button>

【问题讨论】:

标签: javascript jquery dropzone.js


【解决方案1】:

您可能已经找到了解决方案,但这对我有用:

  • 向表单添加提交按钮
  • autoProcessQueue: false 添加到拖放区选项
  • 覆盖提交按钮的点击事件,并在告诉 dropzone 处理队列之前检查您的条件:

    $('#submit_button').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
    
        if ( //check your conditions here ) {
            myDropzone.processQueue();
        } else {
           //show error     
        }
    });
    

【讨论】:

    猜你喜欢
    • 2013-03-28
    • 2019-11-24
    • 2017-10-20
    • 2017-05-22
    • 1970-01-01
    • 2012-05-01
    • 2020-11-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多