Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JQuery » Código de JQuery - Enviar un archivo por AJAX utilizando FormData

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

Volver
Agregar Código Fuente
<<>>

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.619 visualizaciones desde el 10 de Mayo del 2018
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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">
        </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
<?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)
{
    if($_FILES["archivo0"]["error"]==UPLOAD_ERR_OK)
    {
        // movemos el archivo a la carpeta donde se encuentra este archivo

        move_uploaded_file($_FILES["archivo0"]["tmp_name"], "./".$_FILES["archivo0"]["name"]);
        $message.="La imagen ".$_FILES["archivo0"]["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 1 - Sube un solo archivo (1)

Carlos
5 de Febrero del 2019
estrellaestrellaestrellaestrellaestrella
Una consulta.. a mi el getFormData("formid",data); me imprime que es undefined.. porque sera?
Responder

Comentar la versión: Versión 1 - Sube un solo archivo

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

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

Publicado el 2 de Marzo del 2019gráfica de visualizaciones de la versión: Versión 2 - Permite subir multitud de archivos
25.858 visualizaciones desde el 2 de Marzo del 2019
http://lwp-l.com/s4594