[JQUERY] 업로드 버튼을 제출 DROPZONE

업로드 버튼을 제출 DROPZONE

해결법

1. ---

   1.당신은 필요 :

   당신은 필요 :

   함께 모아서:

   Dropzone.options.frmTarget = {
       autoProcessQueue: false,
       url: 'upload_files.php',
       init: function () {
   
           var myDropzone = this;
   
           // Update selector to match your button
           $("#button").click(function (e) {
               e.preventDefault();
               myDropzone.processQueue();
           });
   
           this.on('sending', function(file, xhr, formData) {
               // Append all form inputs to the formData Dropzone will POST
               var data = $('#frmTarget').serializeArray();
               $.each(data, function(key, el) {
                   formData.append(el.name, el.value);
               });
           });
       }
   }
   

2. ---

   2.나뿐만 아니라 순수한 바닐라 JS 솔루션을 추가 할 줄 알았는데, 아니 jQuery를.

   나뿐만 아니라 순수한 바닐라 JS 솔루션을 추가 할 줄 알았는데, 아니 jQuery를.

   /* 'dropform' is a camelized version of your dropzone form's ID */
         Dropzone.options.dropform = {
           /* Add all your configuration here */
           autoProcessQueue: false,
   
           init: function()
           {
             let myDropzone = this;
             /* 'submit-dropzone-btn' is the ID of the form submit button */
             document.getElementById('submit-dropzone-btn').addEventListener("click", function (e) {
                 e.preventDefault();
                 myDropzone.processQueue();
             });
   
             this.on('sending', function(file, xhr, formData) 
             {
               /* OPTION 1 (not recommended): Construct key/value pairs from inputs in the form to be sent off via new FormData
                  'dropform' is the ID of your dropzone form
                  This method still works, but it's submitting a new form instance.  */
                 formData = new FormData(document.getElementById('dropform'));
   
                /* OPTION 2: Append inputs to FormData */
                 formData.append("input-name", document.getElementById('input-id').value);
             });
           }
         };
   

   참고 : 같은 우리가 여기서 뭐하는 보내는 것과 같은 설정 이벤트 리스너는 init 함수 내부에 넣어해야합니다. 당신은 예를 들어, 다른 곳을 배치 인 경우 :

   init: function() 
   {
       //...
   },
   sending: function(file, xhr, formData) 
   {
     //... logic before each file send
   }
   

   이 기본 논리 DROPZONE가 보내는 이벤트 리스너를 제공 무시되고, 의도하지 않은 부작용이 발생할 수 있습니다. 당신이 무슨 일을하는지 알고있는 경우에만이 작업을 수행해야합니다.

from https://stackoverflow.com/questions/46728205/dropzone-submit-button-on-upload by cc-by-sa and MIT license