dropzone.js文件上傳遇到問題

Question

我第一次在另一種表單中使用dropzone.js ...因此無法嵌套兩個表單，因此我刪除了dropzone的表單：

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

'error' => int 4表示沒有文件上傳，我認為這是因為您正在提交表單，就像它是常規表單一樣，如果您想在常規表單中包含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);
}

服務器文件僅打印服務器上接收到的數據，因此您可以在瀏覽器控制台中看到它。 我省略了引導程序類和元素只是為了顯示相關部分，但是您可以添加它們沒有問題。

Answer 2

要在另一個表單中放置一個dropzone，您可以將div放在class =“ dropzone”的表單中，並將其轉換為dropzone元素，如下所示：

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與您的形式： 小提琴