일반 폼을 여러 개의 드롭 존과 결합하십시오.

Question

폼에 여러 개의 드롭 존이 있어야합니다. 그래서 양식을 만들었습니다.

<form method="post"> 
    <div class="upload-files" data-name="mainImages[]" /> 
    <div class="upload-files" data-name="secImages[]" /> 
    <!-- could also be more --> 

    <input type="text" name="test" /> 

    <input type="submit" /> 
</form> 

드롭 존은 고유 한 paramName으로 초기화됩니다.

var dropzones = []; 
$('.upload-files').each(function() { 
    dropzones.push(new Dropzone('#' + $dropzone.attr('id'), { 
     paramName: $(this).data('name'), 
     // ... 
    } 
); 

this.dropzones = dropzones; 

한 번의 요청으로 양식 데이터와 함께 여러 개의 드롭 존을 제출하는 방법은 무엇입니까? 현재 제출시 이와 같이 보입니다.

// submit 
if (this.dropzones.length) { 
    return true; // normal form submit without dropzone 
} 

// dropzone submit form 
for (var i = 0, length = this.dropzones.length; i < length; i++) { 
    // TODO combine files with correct paramNames 
} 

나는이 https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone 알고 있지만 이것은 단지 하나 개의 형태로 하나 DROPZONE입니다.

내가해야 할 일은 제출할 때 두 번째, 세 번째, ... dropzone 파일을 추가하는 것입니다.하지만이를 처리하는 방법을 모릅니다.

Answer 1

폼에 여러 개의 드롭 존으로 작업 할 수있는 해결책을 찾았다면 다음을 수행해야합니다.

if (!this.dropzones.length) { 
    // default form submit 
    return true; 
} 

// submit over dropzone 
event.preventDefault(); 
this.dropzones[0].processQueue(); 

return false; 

이렇게하면 첫 번째 dropzone이 처리됩니다. 전송 중 여러 이벤트에서 다른 드롭 존 파일을 제출에 추가해야하는 것을 알고 있습니다.

init: function() { 
    this.on('sendingmultiple', function(data, xhr, formData) { 
     // add other form fields 
     $.each($form.serializeArray(), function(index, item) { 
      formData.append(item.name, item.value); 
     }); 

     // add other dropzone files 
     for (var i = 1, length = this.dropzones.length; i < length; i++) { 
      var files = this.dropzones[i].getQueuedFiles(); 

      for (var x = 0, fileLength = files.length; x < fileLength; x++) { 
       formData.append(
        this.dropzones[i]._getParamName(x), 
        files[x], 
        files[x].name 
       ); 
      } 
     } 
    }); 
}