Código de JQuery - Enviar un archivo por AJAX utilizando FormData

Pos: 1

Val: 302

Ha mantenido su posición en JQuery (en relación al último mes)

Enviar un archivo por AJAX utilizando FormData

JQuery

(3)

Actualizado el 2 de Marzo del 2019 por Xve (294 códigos) (Publicado el 10 de Mayo del 2018)

30.963 visualizaciones desde el 10 de Mayo del 2018

Este simple código muestra como enviar un archivo y un texto mediante AJAX utilizando jquery, y obteniendo el resultado del mismo en JSON para mostrarlo al usuario.

ajax-enviar-archivo-y-texto-ok

Versión 1 - Sube un solo archivo
(1)

Actualizado el 11 de Marzo del 2019 (Publicado el 10 de Mayo del 2018)

gráfica de visualizaciones de la versión: Versión 1 - Sube un solo archivo

4.684 visualizaciones desde el 10 de Mayo del 2018

Versión 2 - Permite subir multitud de archivos
(2)

Publicado el 2 de Marzo del 2019

gráfica de visualizaciones de la versión: Versión 2 - Permite subir multitud de archivos

26.280 visualizaciones desde el 2 de Marzo del 2019

Modificado para poder seleccionar varios archivos

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

    <style>

    #miForm>div {width:200px;padding:10px;}

    input {width:200px;}

    .center {text-align:center;}

    </style>

</head>

<body>

    <form id="miForm">

        <div>

            <input type="file" id="idFiles" name="file" value="selecciona archivo" multiple>

        </div>

        <div>

            <input type="text" name="nombre" placeholder="nombre">

        </div>

        <div class='center'>

            <input type="submit" value="enviar">

        </div>

    </form>

</body>

</html>

<script>

/**

 * AJAX para enviar el formulario con la imagen al archivo guardar.php

*/

$("#miForm input[type=submit]").click(function() {

    var data=getFiles();

    data=getFormData("miForm",data);

    $.ajax({

        url:"guardar.php",

        type:"POST",

        data:data,

        dataType:"json",

        contentType:false,

        processData:false,

        cache:false

    }).done(function(data){

        if(data.ok==1)

            alert("datos enviados correctamente\n\n"+data.message);

        }else{

            alert("ha habido algun error\n\n"+data.message);

});

	return false;

});

/**

 * Función que pone el archivo en un FormData

 * @return FormData

*/

function getFiles()

	var idFiles=document.getElementById("idFiles");

	// Obtenemos el listado de archivos en un array

	var archivos=idFiles.files;

	// Creamos un objeto FormData, que nos permitira enviar un formulario

	// Este objeto, ya tiene la propiedad multipart/form-data

	var data=new FormData();

	// Recorremos todo el array de archivos y lo vamos añadiendo all

	// objeto data

	for(var i=0;i<archivos.length;i++)

		// Al objeto data, le pasamos clave,valor

		data.append("archivo"+i,archivos[i]);

	return data;

/**

 * Función que recorre todo el formulario para apadir en el FormData los valores del formulario

 * @param string id hace referencia al id del formulario

 * @param FormData data hace referencia al FormData

 * @return FormData

*/

function getFormData(id,data)

	$("#"+id).find("input,select").each(function(i,v) {

        if(v.type!=="file") {

            if(v.type==="checkbox" && v.checked===true) {

                data.append(v.name,"on");

            }else{

                data.append(v.name,v.value);

});

	return data;

</script>

guardar.php

<?php

// contiene el mensaje a mostrar al usuario

$message="";

// si vale 1 todo ha ido bien, 0 ha habido algun problema

$ok=1;

if($_POST["nombre"])

    $message.="El nombre recibido es: ".$_POST["nombre"]."\n";

}else{

    $message.="No se ha recibido el nombre\n";

    $ok=0;

if($_FILES)

    foreach($_FILES as $file)

        if($file["error"]==UPLOAD_ERR_OK)

            // movemos el archivo a la carpeta donde se encuentra este archivo

            move_uploaded_file($file["tmp_name"], "./".$file["name"]);

            $message.="La imagen ".$file["name"]." se ha recibido correctamente\n";

}else{

    $message.="No se ha recibido ningun archivo\n";

    $ok=0;

# devolvemos un json con la información

echo json_encode(array("ok"=>$ok,"message"=>$message));

?>

Comentarios sobre la versión: Versión 2 - Permite subir multitud de archivos (2)

Giovanni

23 de Marzo del 2020

Hola Xve. Te escribe Giovanni Melendez desde Bogotá, Colombia

Soy profesor de informática en un colegio sin animo de lucro ubicado en una de las zonas mas complicadas de Bogotá pero con muchos jovenes que quieren salir adelante.

Nuestro recursos economicos y tecnologicos son minimos. En estos momentos estamos en emergencia por el coronavirus y tenemos que buscar mencanismos de contacto con nuestros estudiantes. Debemos seguir enseñando a los niños. Una de las estrategias que he pensado es que los estudiantes nos envien las actividades pero como economicamente no podemos montar Moodle encontré tu aplicación y tengo una pregunta.

1. Tenemos varios cursos (101, 102, 103, etc) y cada curso tiene varias asignaturas (matematicas, informatica, sociales, ciencias, etc). La idea seria tener un formualrio donde ellos puedan enviar las activiades y cada actividad quede almacenada en la carpeta correspondiente a la jornada (mañana, tarde) al curso y materia. Por ejemplo el estudiante en el formulario selecciona jornada tarde, curso 101 asignatura informatica y la informacion que suba queda en esa carpeta. Seria excelente poder usar drive u otra opción. eso es posible?
Gracias

Responder

Miguel Angel

13 de Enero del 2021

drop box tiene su propia api para subir, listar y descargar archivos y desde laravel puedes hacer lo que necesitas de manera "sencilla" y con cuentas gratuitas

Responder