He creado una subida de archivos funciona bien cuando es la primera vez que subo un archivo, cuando lo vuelvo a intentar, si se sube el archivo, lo que no debería hacer es recargar la pagina ya que utilizo Ajax para enviar esto, soy nuevo en el tema ya he buscado bastante y no le encuentro solución.
$(document).ready(function () {
$(".messages").hide();
var fileExtension = "";
$(':file').change(function ()
{
var file = $("#imagen")[0].files[0];
var fileName = file.name;
fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
var fileSize = file.size;
var fileType = file.type;
showMessage("<span class='info'>Archivo para subir: " + fileName + ", peso total: " + fileSize + " bytes.</span>");
});
$(':button').click(function () {
var formData = new FormData($(".formulario")[0]);
var message = "";
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
message = $("<span class='before'>Subiendo la imagen, por favor espere...</span>");
showMessage(message)
},
success: function (data) {
message = $("<span class='success'>La imagen ha subido correctamente.</span>");
showMessage(message);
if (isImage(fileExtension))
{
$(".showImage").html("<img class='img-thumbnail img-fluid' style='height: 400px;width: 400px;'src='files/" + data + "' />");
$(".hiden_name").html("<p>"+ data +"'<p/>");
}
},
error: function () {
message = $("<span class='error'>Ha ocurrido un error.</span>");
showMessage(message);
}
});
});
})
function showMessage(message) { $(".messages").html("").show(); $(".messages").html(message); }
function isImage(extension) { switch (extension.toLowerCase()) { case 'jpg': case 'gif': case 'png': case 'jpeg': return true; break; default: return false; break; } }
front-end
<div class="container">
<form enctype="multipart/form-data" class="formulario">
<label>Subir un archivo</label><br />
<input name="archivo" type="file" id="imagen" ><br /><br />
</form>
<button id="enviarDatos" class="btn btn-success">Enviar datos</button> <br /><br />
<!--div para visualizar mensajes-->
<div class="messages"></div><br /><br />
<!--div para visualizar en el caso de imagen-->
<div class="showImage " ></div>
<div class="hiden_name">
</div>
</div>
archivo.php
<?php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
$file = $_FILES['archivo']['name'];
if(!is_dir("files/"))
mkdir("files/", 0777);
if ($file && move_uploaded_file($_FILES['archivo']['tmp_name'],"files/".$file))
{
}
}else{
throw new Exception("Error Processing Request", 1);
}