Tengo una función en js que utiliza AJAX para subir un archivo, si no he seleccionado ningún archivo y hago el click al botón subir la acción del js se ejecuta sin problemas (muestra un alert si no se ha seleccionado un archivo), pero si selecciono un archivo y hago click al boton subir (ahí es donde se ejecuta el AJAX), no funciona con el primer click, sino que debo hacer un segundo click y es entonces cuando se ejecuta sin problemas. ¿Que estoy haciendo mal?
function vacio() {
var x;
x = document.getElementById("archivo").value;
if (x != "") {
$(document).ready(function() {
$(".upload").on('click', function(e) {
e.preventDefault();
var formData = new FormData();
var files = $('#archivo')[0].files[0];
formData.append('file',files);
$.ajax({
url: "subir.php",
type: "post",
dataType: "html",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response) {
if (response == "0") {
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Información guardada',
showConfirmButton: false,
timer: 1500}).then(function(){location.reload();});
} else {
Swal.fire({
position: 'top-end',
icon: 'error',
title: 'Error al subir el archivo',
html: response
});
return false
}
}
});
return false;
});});
}
else {
Swal.fire({
icon: 'error',
title: 'Debe seleccionar un archivo',
showConfirmButton: false,
timer: 1500
});
return false;
}
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#" enctype="multipart/form-data">
<input type="file" class="form-control-file" id="archivo">
<input type="button" class="btn btn-primary upload" value="Subir" onclick="return vacio();">
</form>