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

Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Enviar un archivo por AJAX utilizando FormDatagráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 2 de Marzo del 2019 por Xve (280 códigos) (Publicado el 10 de Mayo del 2018)
14.711 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

ajax-enviar-archivo-y-texto-ko

Versión 1 - Sube un solo archivo
estrellaestrellaestrellaestrellaestrella(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.062 visualizaciones desde el 10 de Mayo del 2018

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

Publicado el 2 de Marzo del 2019gráfica de visualizaciones de la versión: Versión 2 - Permite subir multitud de archivos
10.650 visualizaciones desde el 2 de Marzo del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Modificado para poder seleccionar varios archivos


index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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 (1)

23 de Marzo del 2020
estrellaestrellaestrellaestrellaestrella
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

Comentar la versión: Versión 2 - Permite subir multitud de archivos

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4594