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>