1

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);   
}

2 respuestas 2

1

El problema esta en que tienes un button dentro del form y te lo toma como un submit, por eso se recarga la página, al no tener un action definido en el form.

SOLUCION:

Prueba a sacar ese boton fuera del form y llamarle como lo vienes haciendo.

<button id="enviarDatos" class="laclasequeledescss">Enviar datos</button>

Y llamarle de esta manera:

$('#enviarDatos').click(function () {

Pruebalo y me cuentas

2
  • mira mi archivo de JS que tenia hice los que me comentaron pero sigue dando problemas crei q estaba seguro q era el Ajax pero les paso el JS completo para descartar otra cosa que no este viendo ' ' Commented el 6 abr. 2018 a las 17:47
  • cambie el JS para que puedan evaluarlo mejor gracias a todos por sus aportes :) Commented el 6 abr. 2018 a las 17:54
1

Si no quieres que haga submit cambia el valor de retorno de la función, en el evento success.

$.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>");
             //return true; // El input lo tienes dentro de un form, evita el submit
             return false;
        }
    },      
    error: function () {
        message = $("<span class='error'>Ha ocurrido un error.</span>");
        showMessage(message);
    }
});
1
  • en el evento success ;) Commented el 6 abr. 2018 a las 11:11

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.