麻煩與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類和元素來顯示相關的部分，但是你可以添加它們沒有問題。