0

tengo un upload de archivos que eestoy manejando con ajax de jquery los datos se obtienen bien pero al insertarlos en en una variable con form siempre duplica el elemento impar que se adjunta pienso que el problema sea por no resetear el formulario como puedo solucionarlo dejo el código.

$(document).ready(function(){
          $('.file_drag_area').on('dragover', function(){
               $(this).addClass('file_drag_over');
               return false;
          });
          $('.file_drag_area').on('dragleave', function(){
               $(this).removeClass('file_drag_over');
               return false;
          });
          $('.file_drag_area').on('drop', function(e){
               e.preventDefault();
               $(this).removeClass('file_drag_over');
               var formData = new FormData();
               var files_list = e.originalEvent.dataTransfer.files;
               //console.log(files_list);
               for(el of files_list)
               {
                    formData.append('file[]', el); // pienso que el problema sea aqui al insertar los archivos, pero no puedo acceder a ellos para verificarlos
                    formData.append('action', 'upload');
                    wrapper      = $('.wrapper'),
                    progress_bar = $('.progress_bar'),
                    progress_text = $('.progress_text'),
                    data         = formData;

                    /////////////////////Inicializando la barra de progreso//////////////////////

                    $.ajax({
                      xhr:function () {
                        let xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener('progress', function (e) {
                          if (e.lengthComputable) {
                            let percentComplete = Math.floor((e.loaded / e.total) * 100);
                            progress_bar.css('width', percentComplete+'%');
                            progress_text.html(percentComplete+'%');
                          }
                        }, false);
                        return xhr;
                      },
                      url:"upload.php",
                        method:"POST",
                      dataType: "json",
                      contentType: false,
                      processData: false,
                      cache: false,
                        data:data,
                        beforeSend: () => {
                        $('.submit1').attr('disabled', true);
                        $('#uploaded_file').append("<li class='attachment-1' id='temp'><div class='attachment-preview'><div class='thumbnail' style='height: 125px'><div class='wrapper mt-5' style='display: none;'><div class='progress progress_grapper'><div class='progress_text'>0%</div><div class='progress-bar progress-bar-striped bg-info progress-bar-animated progress_bar' role='progressbar' style='width: 0%;'></div></div></div></div></div></li>");
                        progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                        wrapper.fadeIn();
                        progress_bar.css('width', '0%');
                        progress_text.html('Preparando...').delay(5000);
                        console.log(data.serialize());
                      }
                    }).done(res =>{
                      if (res.status == 200) {
                        progress_bar.removeClass('bg_info').addClass('bg_succes');
                        progress_text.html('¡Listo!');
                        //formData.empty();
                        //$('#uploaded_file').empty();
                        $('#temp').remove();
                        $('#uploaded_file').prepend(res.data);

                        setTimeout(() => {
                          wrapper.fadeOut(50);
                          progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                          progress_bar.css('width', '0%');
                        }, 1500);
                      } else {
                        alert(res.msg);
                        progress_bar.css('width', '0%');
                        progress_text.html(res.msg);
                        setTimeout(() => {
                          wrapper.fadeOut(50);
                          progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                          progress_bar.css('width', '0%');
                        }, 1500);
                      }
                    }).fail(err => {
                      progress_bar.removeClass('bg_succes bg_info').addClass('bg_danger');
                      progress_text.html('¡Hubo un error!');
                      setTimeout(() => {
                        wrapper.fadeOut(50);
                        progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                        progress_bar.css('width', '0%');
                      }, 1500);
                    }).always(() => {
                      $('.submit1').attr('disabled', false);
                      setTimeout(() => {
                        wrapper.fadeOut(50);
                        progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                        progress_bar.css('width', '0%');
                      }, 1500);
                    });
                    formData.trigger.reset();
               }
          });
     });
.container{
  background: c0c0c0;
}
.file_drag_area {
    width: 100%;
    min-height: 300px;
    border: 4px dashed rgba(248, 248, 248, 0.25);
    text-align: center;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.95);
    vertical-align: middle;
    margin: 15px 0 15px 0;
}
.file_drag_over {
    color: #000;
    border-color: #000;
    background: rgba(0, 153, 204, 0.73);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="container">
      <div class="file_drag_area">
                 Arrastre aquí los archivos para subirlos.
            </div>
  </div>

1 respuesta 1

0

Resuelto, solo había que vaciar el formData, para cada ejecución, con formData.delete(), de igual forma se puede usar formData.set() que sobrescribe el valor de la clave del array que en ste caso es file[], adjunto código para quien quiera usarlo, para saber más sobre forData().

    $(document).ready(function(){
      $('.file_drag_area').on('dragover', function(){
           $(this).addClass('file_drag_over');
           return false;
      });
      $('.file_drag_area').on('dragleave', function(){
           $(this).removeClass('file_drag_over');
           return false;
      });
      $('.file_drag_area').on('drop', function(e){
           e.preventDefault();
           $(this).removeClass('file_drag_over');
           var formData = new FormData();
           var files_list = e.originalEvent.dataTransfer.files;
           //console.log(files_list);
           for(el of files_list)
           {
                formData.append('file[]', el);
                formData.append('action', 'upload');

                media          = $('.imgs, .auds'),
                wrapper      = $('.wrapper'),
                progress_bar = $('.progress_bar'),
                progress_text = $('.progress_text'),
                data         = formData;

                /////////////////////Inicializando la barra de progreso//////////////////////

                $.ajax({
                  xhr:function () {
                    let xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener('progress', function (e) {
                      if (e.lengthComputable) {
                        let percentComplete = Math.floor((e.loaded / e.total) * 100);
                        progress_bar.css('width', percentComplete+'%');
                        progress_text.html(percentComplete+'%');
                      }
                    }, false);
                    return xhr;
                  },
                  url:"core-interface.php",
                    method:"POST",
                  dataType: "json",
                  contentType: false,
                  processData: false,
                  cache: false,
                    data:data,
                    beforeSend: () => {
                    $('.submit1').attr('disabled', true);
                    $('#uploaded_file').append("<li class='attachment-1' id='temp'><div class='attachment-preview'><div class='thumbnail' style='height: 125px'><div class='wrapper mt-5' style='display: none;'><div class='progress progress_grapper'><div class='progress_text'>0%</div><div class='progress-bar progress-bar-striped bg-info progress-bar-animated progress_bar' role='progressbar' style='width: 0%;'></div></div></div></div></div></li>");
                    progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                    wrapper.fadeIn();
                    progress_bar.css('width', '0%');
                    progress_text.html('Preparando...').delay(5000);
                  }
                }).done(res =>{
                  if (res.status == 200) {
                    progress_bar.removeClass('bg_info').addClass('bg_succes');
                    progress_text.html('¡Listo!');
                    $('#temp').remove();
                    $('#uploaded_file').prepend(res.data);

                    setTimeout(() => {
                      wrapper.fadeOut(50);
                      progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                      progress_bar.css('width', '0%');
                    }, 1500);
                  } else {
                    alert(res.msg);
                    progress_bar.css('width', '0%');
                    progress_text.html(res.msg);
                    setTimeout(() => {
                      wrapper.fadeOut(50);
                      progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                      progress_bar.css('width', '0%');
                    }, 1500);
                  }
                }).fail(err => {
                  progress_bar.removeClass('bg_succes bg_info').addClass('bg_danger');
                  progress_text.html('¡Hubo un error!');
                  setTimeout(() => {
                    wrapper.fadeOut(50);
                    progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                    progress_bar.css('width', '0%');
                  }, 1500);
                }).always(() => {
                  $('.submit1').attr('disabled', false);
                  setTimeout(() => {
                    wrapper.fadeOut(50);
                    progress_bar.removeClass('bg_succes bg_danger').addClass('bg_info');
                    progress_bar.css('width', '0%');
                  }, 1500);
                });
                formData.delete('file[]'); // aqui vaciamos el formData.
           }
      });
 });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.