Question

como hacer un upload multiple files upload paso a paso con php js mysql sin recargar mi pagina

Comments

No estaría mal que extendieras un poco la descripción de tu pregunta, porque involucra demasiadas cosas como para solo poner un título.

Saludos.

Answer 1

Hola Antonio,

le pregunta es un poco larga de responder, por todo el código a generar.

Te envío varios ejemplos que explican paso a paso el proceso, y también una explicación para hacerlo usando la biblioteca JavaScript JQuery:

Tutorial paso a paso:
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

Conceptos y teoría:
http://www.openjs.com/articles/ajax/ajax_file_upload/

Ejemplo usando JQuery:
http://www.saaraan.com/2012/06/ajax-file-upload-with-php-and-jquery

Si estás usando HTML5 podés hacerlo para múltiples archivos simplemente agregando el atributo "multiple" al input:

<input type="file" name="archivo" id="archivo" multiple />

y luego procesando cada entrada. Si lo estás haciendo para versiones anteriores de HTML, bastaría con generar más input de tipo file y procesarlos.

Saludos cordiales!

Answer 2

Para poder realizar la subida de multiples archivos sin recargar la página puedes hacerlo mediante AJAX. Para ello creas un formulario en HTML normal y corriente.

 <form id="formulario" action="" method="POST" enctype="multipart/form-data">
       <input type="file" name="archivos[]" multiple>
  </form>
  <a href="javascript:enviaForm()">Enviar!</a>

Fíjate en que el action del formularía lo he dejado vacío porque sera la función de javascript enviaForm() la que se encargara de enviar los datos al servidor.

Ahora definimos la función enviaForm() en javascript:

function enviaForm(){
    var form = new FormData(document.forms.namedItem("formulario"));

    $.ajax({
        url: "subir.php",
        type: "POST",
        data: form,
        cache: false,
        processData: false,
        contentType: false,
        success:
            document.getElementById("formulario").reset();
    });
}

En la primera sentencia de la función almacenas todos los datos del formulario en una variable form del tipo formData. Y después enviamos mediante AJAX el formulario.

url: especifica la dirección del archivo PHP que manejará los datos en el servidor.
type: especifica el metodo de envío. En este casi POST
data: son los datos que se envían. En este caso el formulario completo.
'contentTypeyprocessData' : se utilizan para que acepte cualquier tipo de datos y no procese los datos.
success: especifica que realizar si el envío ha sido correcto. En este caso hace un reset del formulario.

Y por último en el lado del servidor puedes acceder a los archivos enviados por el formulario mediante la variable $_FILES

foreach ($_FILES["archivos"]["error"] as $key => $value) {
        if ($value == UPLOAD_ERR_OK) {
            $tmp_name = $_FILES["archivos"]["tmp_name"][$key];
            $name = $_FILES["archivos"]["name"][$key];
          if(!move_uploaded_file($tmp_name, "$path".$name)){
            $error = "Error al guardar el archivo: ".$name."<br>";
            }
        }
}

Answer 3

Creo algo si es lo que buscaba solo tratare de adecuarlo a mi proyecto y ver si puedo colocarle un progressbar. Pero muchas gracias por ayudarme.