麻烦与dropzone.js文件上传

Question

我使用了另一种形式的内首次dropzone.js ......这样两种形式不能嵌套，我删除了悬浮窗的形式：

HTML片段：

<form id="addproduct" name="addproduct" action="receiveAddForm" method="post" enctype="multipart/form-data"> 
    <fieldset class="form-horizontal"> 
    <div class="form-group"> 
     <div class="col-sm-2"> 
     <small class="text-navy"><b>* Campos Obligatorios</b></small> 
     </div> 
    </div> 
    <div class="form-group"><label class="col-sm-2 control-label">Nombre (Modelo) *:</label> 
     <div class="col-sm-10"><input name="name" type="text" class="form-control"></div> 
    </div> 
    </fieldset> 

    <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div> 
</form> 

JS片段：

Dropzone.options.myAwesomeDropzone = { 
     autoProcessQueue: false, 
     uploadMultiple: true, 
     parallelUploads: 100, 
     maxFiles: 3, 
     addRemoveLinks: true, 
     maxFilesize: 10, 
     url: 'receiveAddForm', 

     init: function() { 
      var myDropzone = this;     

      $("#submit_form").click(function (e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       myDropzone.processQueue(); 
      }); 

      this.on("sendingmultiple", function() { 
      }); 
      this.on("successmultiple", function(files, response) { 
      }); 
      this.on("errormultiple", function(files, response) { 
      }); 

      this.on("maxfilesexceeded", function(file){ 
       // alert("No more files please!"); 
      }); 

      this.on("uploadprogress", function(file, progress) { 
       console.log("File progress", progress); 
      }); 
     } 
    } 

所以在服务器端，我呼应后得到这个$ _FILES：

array (size=1) 
'files' => 
    array (size=5) 
    'name' => string '' (length=0) 
    'type' => string '' (length=0) 
    'tmp_name' => string '' (length=0) 
    'error' => int 4 
    'size' => int 0 

这里似乎是什么问题？我的php.ini设置为1000MB上传最大文件大小，内存限制等......任何帮助将被赞赏！

Answer 1

有另一种形式的内悬浮窗，你可以把一个div与类=“悬浮窗”的形式，并将其转换为悬浮窗元素是这样的：

Dropzone.autoDiscover = false; 

var myDropzone = new Dropzone("#my-awesome-dropzone", { 
    autoProcessQueue: false, 
    url: "receiveAddForm", 
    // other options 
}); 

那么你可以这样调用的事件：

myDropzone.on("addedfile", function(file) { 
    console.log("File added:", file.name); 
}); 

的jsfiddle与形式： fiddle

Answer 2

的'error' => int 4意味着没有文件已经uploa德德，我认为这是因为你提交的表单就像是一个普通的表格一样，如果你想在普通表格中包含dropzone，我认为你不能以常规的方式提交表单并附加到文件中在dropzone元素中，或者至少没有简单的方法来做到这一点，一种解决方案可能是在base64中编码文件，然后将编码后的字符串添加到要发送的输入中。

但我认为一个简单的方法是使用dropzone发送表单并将输入值附加到使用javascript的请求中，这里是通用示例。

HTML：

<form id="addproduct"> 
    <label>Input 1: </label> 
    <input type="text" name="input1"> 
    <label>Input 2: </label> 
    <input type="text" name="input2"> 
    <div id="myAwesomeDropzone" class="dropzone"></div> 
</form> 
<button type="button" id="submit_form">Submit</button> 

JS：

Dropzone.options.myAwesomeDropzone = { 
    url: 'receiveAddForm', 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    parallelUploads: 3, 
    maxFiles: 3, 
    init: function() { 
     var myDropzone = this; 
     $('#submit_form').on("click", function() { 
      myDropzone.processQueue(); 
     }); 
     this.on("sending", function(file, xhr, formData){ 
      $('#addproduct').find('input').each(function() { 
       formData.append($(this).attr('name'), $(this).val()); 
      }); 
     }); 
     this.on("success", function(file, response) { 
      console.log(response); 
     }); 
     this.on("completemultiple", function(files) { 
      // Here goes what you want to do when the upload is done 
      // Redirect, reload , load content ...... 
     }); 
    }, 

}; 

receiveAddForm（PHP）：

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
{ 
    echo "RECEIVED ON SERVER: \n"; 
    print_r($_FILES); 
    print_r($_POST); 
} 

服务器文件只是打印服务器上接收到的数据，所以你可以看到它在浏览器控制台中。我省略了bootstrap类和元素来显示相关的部分，但是你可以添加它们没有问题。