AJAX Загрузка нескольких файлов для преобразования в Dropzone - PullRequest
Новая
       10

AJAX Загрузка нескольких файлов для преобразования в Dropzone

0 голосов
/ 26 мая 2020

Привет, я хотел бы получить помощь о том, как я могу преобразовать мою обычную загрузку формы с множественным выбором с использованием AJAX в Dropzone?

Ниже мой существующий код: 

<form name="uploadForm" id="uploadForm" method="POST" enctype="multipart/form-data">  
     <select class="form-control" id="templateName" name="templateName">
         <option value="">-Select Template-</option>                                                     
         <option value="1">1</option>
         <option value="2">2</option>
     </select>
     <input type="file" class="custom-file-input" name="xml_file[]" id="xml_file" multiple>
     <button type="button" id="upload">Upload</button>
</form>

<script>

    $("#upload").on("click", function(){
         formData = new FormData($("form[name='uploadForm']")[0]);

         $.ajax({
           url: 'ajax-file-upload',
           headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           },
           type: 'POST',
           data: formData,
           dataType: 'text',
           cache: false,  
           contentType: false,
           processData: false,
           success: function(data){
             console.log(data);
           }
        });
    });

</script>

Это то, что я пытаюсь сделать 

<script>
Dropzone.autoDiscover = false;

/* Dropzone Configuration */
var myDropzone = new Dropzone("#uploadForm", { 
   autoProcessQueue: false,
   parallelUploads: 50 // Number of files process at a time (default 2)
});

$("#upload").on("click", function(){
   formData = new FormData($("form[name='uploadForm']")[0]);

     $.ajax({
       url: 'ajax-file-upload',
       headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       },
       type: 'POST',
       data: formData,
       dataType: 'text',
       cache: false,  
       contentType: false,
       processData: false,
       success: function(data){
          console.log(data);
       }
     });
 });
</script>

Однако он возвращает мне только данные формы для тега select option, я знаю, что myDropzone.files может вернуть мне файлы для загрузки, но как мне сделать это таким же точные данные формы, которые я передал изначально. Потому что мне нужен доступ к данным xml_file на бэкэнде.

1 Ответ

0 голосов
/ 26 мая 2020

Я уже нашел решение,

(1) сначала мне нужно сохранить <input type="file" class="custom-file-input" name="xml_file[]" id="xml_file" multiple>, вы можете скрыть его, если полностью хотите загрузить, просто отбросив файлы, в противном случае оставьте его видимым .

(2) Загрузить Нажав кнопку «Загрузить», мне нужно будет установить и обновить значение formData. Чтобы обновить мой formData, мне нужно добавить имя входа xml_file[]
с .dropzone.getAcceptedFiles(). Вот как мы получаем доступ к файлам, принятым dropzone, l oop в этот массив, чтобы увидеть все принятые файлы.

См. Ниже для справки, есть еще много возможностей для улучшения, я просто оставлю это как это пока. 

 <script>
    Dropzone.autoDiscover = false;

    /* Dropzone Configuration */
    var myDropzone = new Dropzone("#uploadForm", { 
       autoProcessQueue: false,
       parallelUploads: 50 // Number of files process at a time (default 2)
    });

    $("#upload").on("click", function(){
       formData = new FormData($("form[name='uploadForm']")[0]);

         $.each($("form[name='uploadForm']")[0].dropzone.getAcceptedFiles(), 
             function(a,b){
            formData.append('xml_file[]', $("form[name='uploadForm']")[0].dropzone.getAcceptedFiles()[a]);
         });

         $.ajax({
           url: 'ajax-file-upload',
           headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           },
           type: 'POST',
           data: formData,
           dataType: 'text',
           cache: false,  
           contentType: false,
           processData: false,
           success: function(data){
              console.log(data);
           }
         });
     });
    </script>
...