Vous êtes sur la page 1sur 46

Uno de piera

Qu ests buscando?

PHP

JAVASCRIPT

RUBY ON RAILS

JAVA

FOROS

CURSOS

CONTACTO

PYTHON

ACCEDER

Home jQuery Subir archivos con php y jQuery

jQuery, Php orientado a objetos

Subir archivos con php y


jQuery
Israel965

FACEBOOK

3 Aos Ago

DESARROLLO
PROFESIONAL
PHP

126 Comentarios

ANTERIOR

SIGUIENTE

CURSO DE
ANGULAR 2.0

CURSO DE

LARAVEL 5.3

NUEVO CURSO
DE TOTAL.JS
Vamos a ver como es posible subir archivos con php y jQuery
de forma realmente sencilla sin la necesidad de utilizar
plugins. Sea dicho que un plugin no slo sube archivos, sino
que siempre tienen ms opciones y muy tiles, pero no a todo
el mundo le gusta, as que vamos a ver otra opcin muy
interesante.
Cabe decir que este script es funcional con todos los
navegadores actuales, es una cosa muy importante y a tener

CURSO
COMPLETO DE
WORDPRESS

en cuenta.
Quede claro que a la hora de utilizarlo en un servidor en
produccin, hay que hacer el proceso de seguridad, ya que
nosotros no lo vamos a llevar a cabo. Esto simplemente viene
a ser modificar el nombre del archivo y comprobar los tipos
de archivo que queremos permitir, no podemos dejar entrar
cualquier cosa o podemos tener problemas.

CURSO DE
CODEIGNITER 3

Una de las grandes recomendaciones para guardar archivos


en un servidor, es, en lo posible, utilizar otros servidores que
ya se encargan de este trabajo.

Subir archivos con php y


jQuery
Ahora si, ya podemos empezar creando un sencillo proyecto

CURSO
EXPRESS DE
LUMEN 5.3

al que podemos llamar upload_ajax, y dentro colocaremos la

X
Aprende
a
desarrollar
aplicaciones
para
web
y
mvil
con
los
cursos
de
estructura:
Uso siguiente
de cookies
cursosdesarrolloweb.es

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si contina navegando est dando su
consentimiento para la aceptacin de las mencionadas cookies y la aceptacin de nuestra poltica de cookies, pinche el
Un
archivo
llamado index.php, aqu ser donde creemos el
enlace
para
mayor informacin.
ACEPTAR
formulario y los divs donde iremos mostrando
informacin

como veremos, aparte de algunos estilos.


Un archivo llamado functions.js, aqu creamos el cdigo

CURSO DE
JQUERY
COMPLETO

javascript encargado de enviar el archivo a nuestro archivo


upload.php, que ser el que finalmente lo aloje en una carpeta
de nuestro servidor.
Aparte de esto, veremos como obtener las propiedades del
archivo antes de subirlo, tamao, nombre etc.
Tambin tendremos una funcin, que pasando la extensin
del archivo, sabr si es o no una imagen haciendo uso de un

CURSO DE
PHALCON 3

bloque switch.
Tambin debemos crear el archivo upload.php, aqu ser
donde procesemos el archivo, lo guardemos, y retornemos
una respuesta a javascript para saber si todo ha salido bien.
Finalmente deberemos crear un archivo .htaccess para evitar
tener problemas con el tamao de los archivos, sto siempre
ser til para nuestros proyectos.

CURSO DE
SOCKETIO CON
NODEJS

CURSO COMPLETO DE PHP 7 DESDE 0

CURSO COMPLETO DE JQUERY DESDE 0

CURSO DE PHP
7 AVANZADO

Abrimos el archivo index.php y colocamos el siguiente


cdigo.
XHTML

1 <html>

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

<head>
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/
<script type="text/javascript" src="functions.js"

<style type="text/css">
.messages{
float: left;
font-family: sans-serif;
display: none;
CURSO DE
}
.info{
ADONISJS
padding: 10px;
border-radius: 10px;
background: orange;
color: #fff;
font-size: 18px;
text-align: center;
}
.before{
padding: 10px;
border-radius: 10px;
background: blue;
color: #fff;
font-size: 18px;
text-align: center;
}
.success{
padding: 10px;
border-radius: 10px;
background: green;
color: #fff;
font-size: 18px;
text-align: center;
}
.error{
padding: 10px;
border-radius: 10px;
background: red;
color: #fff;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<!--el enctype debe soportar subida de archivos con multipart/form-data-->
<form enctype="multipart/form-data" class=
<label>Subir un archivo</label><br />
<input name="archivo" type="file" id="imagen"
<input type="button" value="Subir imagen"
</form>
<!--div para visualizar mensajes-->
<div class="messages"></div><br /><br />
<!--div para visualizar en el caso de imagen-->
<div class="showImage"></div>
</body>
</html>

Sencillo, simplemente debemos cargar la ltima versin de


jQuery a travs de su CDN, y el archivo functions.js, despus
slo tenemos unos estilos y el formulario que debemos
procesar.
Abrimos el archivo functions.js y colocamos el siguiente
cdigo.
JavaScript

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

$(document).ready(function(){

$(".messages").hide();
//queremos que esta variable sea global
var fileExtension = "";
//funcin que observa los cambios del campo file y obtiene informacin
$(':file').change(function()
{
//obtenemos un array con los datos del archivo
var file = $("#imagen")[0].files[0];
//obtenemos el nombre del archivo
var fileName = file.name;
//obtenemos la extensin del archivo
fileExtension = fileName.substring(fileName
//obtenemos el tamao del archivo
var fileSize = file.size;
//obtenemos el tipo de archivo image/png ejemplo
var fileType = file.type;
//mensaje con la informacin del archivo
showMessage("<span class='info'>Archivo para subir: "
});

//al enviar el formulario


$(':button').click(function(){
//informacin del formulario
var formData = new FormData($(".formulario"
var message = "";
//hacemos la peticin ajax
$.ajax({
url: 'upload.php',
type: 'POST',
// Form data
//datos del formulario
data: formData,
//necesario para subir archivos via ajax
cache: false,
contentType: false,
processData: false,
//mientras enviamos el archivo
beforeSend: function(){
message = $("<span class='before'>Subiendo la imagen, por favor
showMessage(message)
},
//una vez finalizado correctamente
success: function(data){

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

message = $("<span class='success'>La imagen ha subido correcta


showMessage(message);
if(isImage(fileExtension))
{
$(".showImage").html("<img src='files/"
}
},
//si ha ocurrido un error
error: function(){
message = $("<span class='error'>Ha ocurrido un error.</span>"
showMessage(message);
}
});
});
})

//como la utilizamos demasiadas veces, creamos una funcin para


//evitar repeticin de cdigo
function showMessage(message){
$(".messages").html("").show();
$(".messages").html(message);
}

//comprobamos si el archivo a subir es una imagen


//para visualizarla una vez haya subido
function isImage(extension)
{
switch(extension.toLowerCase())
{
case 'jpg': case 'gif': case 'png': case
return true;
break;
default:
return false;
break;
}
}

Ms complicado, pero todo est explicado en cada seccin,


as que no te constar demasiado o nada entenderlo, simple
lgica.
Ahora abrimos el archivo .htaccess que debe estar en la raz y
colocamos el siguiente cdigo para poder subir archivos ms
pesados.
PHP

1 php_value upload_max_filesize 40M


2 php_value post_max_size 40M

Todo depende de la configuracin de nuestro phpini, sto

quede claro que es para apache, ya que modificamos el


phpini.
Ahora slo nos queda abrir el archivo upload.php y colocar el
siguiente cdigo, el cul obtendr el archivo procesado con
ajax y lo guardar en nuestro servidor, como siempre,
comprobaremos que sea una peticin ajax, siempre es bueno
un mnimo de seguridad.
PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
//comprobamos que sea una peticin ajax
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
{

//obtenemos el archivo a subir


$file = $_FILES['archivo']['name'];

//comprobamos si existe un directorio para subir el archivo


//si no es as, lo creamos
if(!is_dir("files/"))
mkdir("files/", 0777);

//comprobamos si el archivo ha subido


if ($file && move_uploaded_file($_FILES['archivo'
{
sleep(3);//retrasamos la peticin 3 segundos
echo $file;//devolvemos el nombre del archivo para pintar la imagen
}
}else{
throw new Exception("Error Processing Request"
}

Y eso es todo, simplemente obtenemos el archivo, creamos el


directorio files si no existe y lo guardamos, nada ms.
De esta forma tan sencilla podemos subir archivos con php y
jQuery.
Si te ha sido til el post puedes utilizar los botones de las
redes sociales para ayudarme con mi trabajo :D.
Hemos hecho una seccin de tutoriales premium, para poder
acceder a cada uno de stos debes suscribirte, el coste es de

slo 6 euros, con sto tendrs acceso a todos los tutoriales


durante un ao. El dinero conseguido es para el
mantenimiento del blog, as que si te est siendo de ayuda,
suscribete y colabora.

FACEBOOK

ANTERIOR

SIGUIENTE

POSTS RELACIONADOS

Introducci
n al SDK
de Paypal,
conseguir
las claves
Israel965
9 Julio,

Introducci
n a las
interfaces
en php

EL patrn
Singleton
en php

Israel965

13

1 Mayo,

Noviembre,

2015

2012

Israel965

2016

Aadir
paypal a
nuestro
carrito de
compras

Capturar
mltiples
eventos
en jQuery

ClearDB
en Heroku,
trabajando
con mysql

Israel965

Israel965

Israel965

24 Agosto,

17

12 Octubre,

2013

Noviembre,

2014

2013

ACERCA DEL AUTOR


Ms entradas de esta autor

Israel965

Hola, soy Israel Parra, desarrollador de aplicaciones para


la web y mvil desde hace 7 aos utilizando los lenguajes
php y javascript. Me gusta conocer las ltimas novedades
que van apareciendo en el mundo de la programacin y
compartirlas con el resto de compaeros.

126 COMENTARIOS
Alessandro Degiusti

22 Septiembre, 2013

Y como puedo hacer para que cambie el nombre de la


imagen, ya que si subimos dos imgenes con el mismo
nombre, se borra la anterior.
Estara bueno si, por ejemplo, se sube una imagen llamada
imagen.jpg, y luego otra con el mismo nombre, esta se pase a
llamar imagen2.jpg

Saludos!
Responder

israel965

Autor

22 Septiembre, 2013

Bueno, creo que si eres programador, o ests en el


camino, es una cosa bastante lgica y sencilla. De
todos modos, hubo un usuario en un tutorial sobre
laravel 4 me hizo la misma pregunta, y aunque es
para laravel, la lgica es lo que interesa.
http://uno-de-piera.com/subir-imagenes-en-laravel4/#comment-1276
Responder

Eduardo

Autor

11 Enero, 2014

Bro no comprendo ese cdigo y disculpa mi


ignorancia en el tema, pero de casualidad no
tiene un cdigo un poco mas comprensible
apenas estoy iniciando en esto de la
programacin. Muchas gracias y disculpe las
molestias.
Responder

Manuel

Autor

13 Mayo, 2014

codigo es muy avanzado empieza por

estudiar php bsico y te recomiendo


aprendas CSS, ya que si te interesa saber
mas sobre AjAX te recomiendo la librera
JQUERY
Responder

Reycop

18 Noviembre, 2013

como puedo hacer que la imagen que subi aparesca en un


div, agradeceria mucho la ayuda
Responder

israel965

Autor

18 Noviembre, 2013

Fcil,
En el success de la funcin jQuery que sube la
imagen debes obtener su nombre y mostrarlo en el
div, es sencillo, saludos.
Responder

JM

26 Noviembre, 2013

Lo he probado en Opera, Firefox, Google Chrome y IE9 y


adivinen en cual no me funcion, es una lastima, en verdad
me gust
Responder

israel965

Autor

26 Noviembre, 2013

Bueno, yo soy casi de los que prefiero poner un


mensaje y decir, desinstale internet explorer, ganar
en calidad de vida, o algo as, saludos.
Responder

Alex

5 Diciembre, 2013

Hola esta Bueno el codigo, muchas gracias! pero me gustaria


que me dijeras como subir imagenes pero en el chat para que
todos lo vean asi como tu chat que creastes una vez pero que
se pueda subir imagenes y poder verlas! Fuera un gran
tutorial! Thanks!
Responder

Fer

17 Diciembre, 2013

Amigo gracias por tu post, una duda no logro subir arhicovs


mayores a 1MB

Ya coloque el .htaccess lo de

php_value upload_max_filesize 40M


php_value post_max_size 40M

tambien lo aumente en el php.ini


porque sera

Responder

israel965

Autor

17 Diciembre, 2013

No tengo ni idea, a mi me permite subir archivos de


cualquier tamao.
Responder

Fer

17 Diciembre, 2013

Disculpa, no me habia dado cuenta que en mi .htaccess que


vengo utlizando tenia elLimitRequestBody en 1MB por eseo
no me dejaba q bruto, gracias de nuevo me sirvio mucho
Responder

israel965

Autor

17 Diciembre, 2013

Me alegro que lo hayas solucionado, saludos.


Responder

jesus

17 Diciembre, 2013

esta muy bueno tu codigo pero tengo una duda como


puedo hacer que envie y reciba mas datos que tengo en el
formulario?? gracias!
Responder

israel965

Autor

17 Diciembre, 2013

Hola, crea un objeto y dentro de ste todo lo que


necesites, por ejemplo un objeto data y en data.files
los archivos, en data.nombre algo etc, no lo he
probado, pero supongo que te funcionar.
Responder

Fer

17 Diciembre, 2013

var formData = new FormData($(form#form_alertas)[0]);


pasas todos los datos del formulario
y los recibes con $_POST[nombre]
y con $_files[] los archivos
Responder

israel965

Autor

17 Diciembre, 2013

Gracias por el aporte Fer.


Responder

angel

27 Diciembre, 2013

disculpe, no se mucho de archivos js, me podria decir que es


lo que enlaza al index del archivo function por favor
Responder

Alexis

2 Enero, 2014

Hola, buenas tardes esta bueno el tutorial gracias antes que


nada por compartir la informacin, como puedo obtener los
datos guardados en la carpeta files mediante el archivo index
guarde el dato de la ruta en una db ya que no se como
obtener el valor de el div class=showImage igual me
guataria saber como puedo hacer para que me permita subir

maximo 5 imagenes y que me muestre la 5 Saludos y


Gracias.
Responder

Manuel

10 Enero, 2014

Hola,
Alguien sabria exponer el motivo exacto por el cul no
funciona en Internet explorer 9?
Gracias de antemano.
Manuel.

Responder

Eduardo

12 Enero, 2014

alguien sabe como se le puede montar una loading bar?


Responder

Luis

20 Febrero, 2014

Buenas.
Me pas algo, cuanto menos curioso y que me tuvo ocupado
casi un da entero antes de conseguir solucionarlo.
Como ya tena hecho el formulario en HTML5 no copi el
cdigo HTML de ejemplo.
No consegua que la llamada ajax funcionara. Daba errores
continuamente.
El problema radicaba en que en lugar de un <input
type=button. > estaba usando un
<button>Enviar</button>.
Por algun motivo que desconozco funciona con el input y no
funciona con el button.
Fuera de eso el cdigo es impecable. Gracias por compartirlo.

Responder

israel965

Autor

20 Febrero, 2014

Hola Luis,
Gracias por dejar esa curiosidad, siempre es
bienvenido todo lo que nos podamos encontrar
programando, seguro que a alguien le sirve, y
gracias por dejar tu comentario, un saludo.
Responder

Elio Castro

21 Febrero, 2014

Buenas noches
Te agradesco el que compratas tus conocimientos,
sinceramente no tenia concimiento de la manera de subir un
archivo mediante post. tambien es la primera vez que
visualizo un switch con los case consecutivos.
Sin embargo a tu codigo en el archivo functions.js podria ser
mas profecional
Razones:
$(.messages).html() hacer esto es inutl y la creacion del
metedo que la integra tambien
Todo la funcion ajax puede ser escrito en un .post() y se
resume eficientemente
y tu index deberia ser .html no .php
Saludos

Responder

israel965

Autor

21 Febrero, 2014

Hola,
Si te gusta tener todo el cdigo sin que ste pueda
ser reutilizado est bien meterlo todo en la misma
funcin, desde luego yo no lo hago nunca.
El que antes de nada se limpie el div messages en
este caso si que es cierto que no es necesario.
Como programo mucho con php, los archivos los
creo en php, creo que no es grave, adems que me
permite introducir cdigo php por si me interesa,
llmalo como quieras segn tus necesidades.
Gracias por comentar.
Responder

lucas

8 Marzo, 2014

Me gusta tutorial.
gracias,
seria estupendo poder seleccionar varios imagenes a la vez y
subirlos.
Ya voy a investigar como lograrlo , pero si sabes como , porfa
compartelo.
Responder

Carlos

16 Marzo, 2014

puedes dejarme el codigo fuente?


Responder

pablo

30 Abril, 2014

Hola.
Primero decir que me ha ayudado mucho el post y
agradecertelo.
Pero tengo un problema, el fichero no me recoge ningun dato

del formulario. Pens que sera xq pongo mas datos, pero ya


vi en un post que poniendo
var formData = new FormData($(form#form_alertas)[0]); se
podia hacer.
Pero sigue sin recogerme nada.
en el upload.php pongo
if ($_POST[submitbtn]==Enviar) {
cdigo
}else{
echo nada;
}
me devuelve nada.

mi codigo de formulario es
<form enctype=multipart/form-data class=formulario>
Seleccione destinatario:<select name=usu id=usu >
</select> <br />
<input type=file name=docload id=docload />
<input type=button value=Enviar name=submitbtn
id=submitbtn>
</form>

y el ajax :

var url = upload.php;


//var formData = new FormData($(.formulario)[0]);
var formData = new FormData($(form#formulario)[0]);
$.ajax({
type: POST,
url: url,
data: formData, // Adjuntar los campos del formulario

enviado.
cache: false,
contentType: false,
processData: false,
success: function(data)
{
$(#viewimage).html(data); // Mostrar la respuestas del
script PHP.
}
});

Espero que podais ayudarme y decirme donde fallo o que


hago mal
Muchas gracias por adelantado.
Responder

luis

3 Mayo, 2014

parcero susede que tal como esta ene le post esta bien
la rason por la q no le recoje datos o se supone q no te
recoje datos es por que no es un submit q es le boton
que envia el form y como los datos los estas
mandando por post con un boton que se ejecute con
javascript para que veas se te recoje datos de tu form
sencillo cojes en tu php y colocas un print_r($_POST);
// para datos post se deseas ver los datos que te recoje
del enctype sencillo colocas un print_r($_FILES)
Responder

Manuel

13 Mayo, 2014

Agradezco el aporte de hecho realice algunos ajustes sobre el


mismo cdigo en cuanto a css por que si el mensaje exceda
dos lineas se vea mocho el acabado, y e cuanto a seguridad

por parte de php para validar los archivos a subir, mil gracias
por el aporte.
Responder

israel965

Autor

13 Mayo, 2014

Gracias a ti Manuel, un saludo.


Responder

Pablo

13 Mayo, 2014

Muchas gracias Israel, me has adelantado mucho un


proyecto gracias a este cdigo, porque yo usaba otro que ha
dejado de funcionar con las nuevas versiones de Chrome y
Firefox y no encontraba la forma de solucionarlo. Un saludo y
gracias de nuevo.
Responder

israel965

Autor

13 Mayo, 2014

Me alegro mucho que te haya sido de ayuda,


saludos
Responder

luis

16 Junio, 2014

Gracias por el tutorial. Me sirvi mucho.


Responder

israel965

Autor

16 Junio, 2014

Muchas gracias por comentar, me alegro mucho,


saludos.
Responder

Jhon James Cano

18 Julio, 2014

Buen Da, agradezco demasiado su aporte, es difcil encontrar


una opcin que permita enviar archivos a travs de Jquery.
Me he tomado la libertad de modificar un poco su cdigo y
con esto he logrado enviar las imgenes y los campos de un
formulario para posteriormente guardar la ruta del archivo y
los campos en una BD.
La verdad me ha sido de mucha utilidad, si no es problema,
adjunto enlace con los archivos que he modificado para que
se utilicen como sean convenientes.
https://mega.co.nz/#!PRZF3TRY!DYapUh6OXbnFSANBAX9UJZLXvd6471FPKzp24Ig2sFc
Muchas Gracias.
Responder

israel965

Autor

18 Julio, 2014

Muchas gracias por tu aporte, estoy seguro que a


mucha gente le ser de ayuda, si todos hicieramos
lo mismo realmente sera todo ms sencillo, muy
agradecido que lo quieras compartir con el blog.
Un saludo
Responder

Andres Ramos

3 Agosto, 2014

Hey gracias, me sirvi bastante el cdigo esta bien


comentado el cdigo javascript
Responder

israel965

Autor

Gracias a ti, saludos.


Responder

3 Agosto, 2014

Ivan dcg

11 Agosto, 2014

Hola, excelente tutorial, me ha servido muchisimo,, queria


preguntar como hago para validar que el archivo que se va
subir sea un documento y no una imagen,, yo estaba
pensando poner esto en el js
PHP

1
2
3
4

if(fileType != 'application/msword' || fileType


{
showMessage("<span class='info'>El tipo de archivo no es valido</sp
}

No se si sea correcto
Responder

israel965

Autor

11 Agosto, 2014

Hola,
La funcin isImage hace exactamente eso, slo que
devuelve false cuando no es una imagen, as que
puedes utilizarlo para cuando sea una imagen o un
archivo.
Gracias por tu comentario, me alegro que te haya
servido.
Puede que esto tambin te sirva.
Saludos.
Responder

Ivan dcg

Autor

11 Agosto, 2014

excelente video, gracias por tu ayuda


Responder

Brayan

7 Septiembre, 2014

Excelente!,
Muchas gracias, me ayudar mucho para un trabajo que
tengo que presentar
Responder

israel965

Autor

7 Septiembre, 2014

Espero que te sea de ayuda, gracias por comentar.


Saludos.
Responder

Fredy salazar

28 Septiembre, 2014

Hola buen dia.


Genial tu aporte me podrias ayudar, vengo desarrollando un
software pero tengo un problema, tengo un formulario 3
inputs de texto y uno file, resulta que funciona bien solo que
cuando envi una imagen con un peso grande, el script pasa
de beforeSend a error, por que ? No lo se, pero cuando envio
una imagen de peso pequeo no pasa ningun error.
Responder

israel965

Autor

28 Septiembre, 2014

Hola,
Has aadido el archivo htaccess?, de todas formas,
deberas ver que contiene el objeto error de la
seccin error de ajax, a ver que est pasando, pero
seguro que tiene que ver con el htaccess y el
tamao mximo permitido.
Saludos.
Responder

Fredy salazar

Autor

28 Septiembre, 2014

Hola gracias por contestar y aun mas gracias


por contestar asi de rapido.
Si ya agregue el .htaccess esta contiene esto:
ErrorDocument 404 /error404.html
php_value upload_max_filesize 40M
php_value post_max_size 40M
php_value max_execution_time 600
Y no creo que sea por el tamao creo que tal
vez es por el tiempo por el atributo timeout en
el metodo ajax pero le alaegue el tiempo de
35000 a 100000 y no nada y luego al final lo
quite y no nada sigue asi ejecutando la funcion
problemastres mira mi codigo es algo asi
utilizo el modal de boopstap.
function guarda()
{
var formData = new FormData($(#formdatos)
[0]);
$.ajax({
type: POST,
url:guarda.php,
data: formData,
cache: false,
contentType: false,
processData: false,
beforeSend:inicioEnviotres,
success:llegadatres,
timeout:35000, // error
error:problemastres
});
return false;
}
function inicioEnviotres()

{
$(#myModal).modal(show);
$(#bodymodal).text(Procesando);
}
function llegadatres(datos)
{
$(#myModal).modal(show);
$(#bodymodal).html(datos);
}
function problemastres()
{
$(#bodymodal).text(Se ha presentado un
error con el servidor L141);
}
Gracias !!
Responder

israel965

Autor

28 Septiembre, 2014

Hola,
Si por ejemplo, tus archivos deben ser
cmo mximo pero permitidos de
100mb, tu .htaccess debe tener.
PHP

1 php_value upload_max_filesize
2 php_value post_max_size 100M

Con eso te debe funcionar.


De todos modos, para cosas
avanzadas tienes este vdeo tutorial
que seguro te sirve y te es ms til.
Saludos.
Responder

Fredy salazar

Autor

28

Septiembre, 2014

Hola
Ya lo sub pero me sigue botando el
mensaje que esta en el funcin
problemas y me estoy dando
cuenta que es algun problema con
el peso pues no me permite enviar
un archivo que pese mas de 159 kb,
que puede ser ? el servidor ?

israel965

Autor

28

Septiembre, 2014

No lo s, pero con ese script


puedes subir archivos del tamao
que quieras siempre que tu
servidor te lo permita.
Abre el ejemplo con chrome,
pulsa f12 y pulsa en network,
cuando enves el archivo pulsa en
la peticin upload a ver que
informacin te dice.

Fredy salazar

28 Septiembre, 2014

Hola mira
Pues aparece en su orden as la verdad no entiendo su
definicin.
POST 500
Internal Server Error
text/html

jquery.js:4
Script
177B
4B
3.08s
3.08s
Responder

israel965

Autor

28 Septiembre, 2014

Hola,
De momento tienes un error 500 en el server, haz
pruebas con diferentes archivos, no te puedo decir
nada ms porqu a mi el mismo cdigo me
funciona bien, lo he probado y he podido subir
archivos de 100mb sin problemas.
Saludos.
Responder

Joaquin

30 Octubre, 2014

Buenos dias
Felicidades, es un muy buen tutorial, me sirvio mucho.
He estado modificandolo un poco para darle mayor
funcionalidad, pero me surgio un problema.
En el Archivo upload.php haces el retorno mediante echo
$file;, si lo quiero retornar en un formato json lo hago
mediante echo json_encode($file);, Que cambios tengo que
hacer en el archivo functions.js para que me interprete la
respuesta en formato json?
De antemano muchas gracias
Responder

israel965

Autor

30 Octubre, 2014

Hola,
Gracias, me alegro que te guste, aade el dataType:
json a la peticin ajax, as en el success tendrs el
json en data ya parseado y no tendrs que hacer
nada ms.
Saludos.
Responder

Joaquin

Autor

30 Octubre, 2014

ya probe de esa forma y no me funciono, en


lugar de entrar a success entra a error, lo
tengo de la siguiente manera:
url: 'upload.php',
type: 'POST',
// Form data
//datos del formulario
data: formData,
//necesario para subir archivos via ajax
cache: false,
contentType: false,
processData: false,
dataType: "json",
y el retorno en upload.php' es echo
json_encode($file);
necesito algo mas?
Responder

israel965

Autor

30 Octubre, 2014

Has hecho un console log del error en


la funcin error?, as debera funcionar.

Responder

Joaquin

Autor

30 Octubre, 2014

Que es lo que deberia de mostrar


en ese colsole log? lo que pasa es
que la funcion error no tiene ningun
parametro que pueda mostrar, y si
se lo agrego de la siguiente forma:
//si ha ocurrido un error
error: function(mal){
console.log("ERROR: "+mal);
message = $("Ha ocurrido un
error.");
showMessage(message);
}
el mensaje es: ERROR: [object
Object]

israel965

Autor

30 Octubre, 2014

Hola,
Haz:
JavaScript

1 JSON.stringify(mal);
Responder

Joaquin

30 Octubre, 2014

Lo realice de la siguiente manera console.log(ERROR:


+JSON.stringify(mal)); y el resultado fue el siguiente:
ERROR:

{readyState:4,responseText:Correcto\n[[\Imagen.jpg\,\true\,true]],status:200,statusText:OK}

el resultado que envio como respuesta es $file el cual es un


arreglo,
en la posicion $file[$i][0] almaceno el nombre del archivo
el la posicion $file[$i][1] almaceno un true si se subio
correctamente
y en la posicion $file[$i][2] almaceno la respuesta Correcto o
Incorrecto que es el resultado de ejecutar una pagina
mediante cURL
y un Error que estoy viendo, aparte de que no reconoce el
formato json, es que Correcto no me lo almacena el el lugar
correcto, sino que en su lugar almacena un Correcto se puede
deber a eso?
esta es la forma en que almaceno los datos
if ($file && move_uploaded_file($_FILES[archivo][tmp_name]
[$i],$destino))
{
$respuesta[$i][1]=true;
$file[$i][0]=$_FILES[archivo][name][$i];
$url = prueba;
$postData = array(ruta => $destino);
$handler = curl_init();
curl_setopt($handler, CURLOPT_URL, $url);
curl_setopt($handler, CURLOPT_POST,true);
curl_setopt($handler, CURLOPT_POSTFIELDS,
http_build_query($postData));
$response = curl_exec ($handler);
curl_close($handler);
$file[$i][2] = $response;
}
lo que quiero es que en el archivo functions.js pueda
interpretar la respuesta $file[][]
Responder

israel965

Autor

30 Octubre, 2014

Hola,
Si te das cuenta te est devolviendo un status 200,
lo que significa que todo ha ido bien:
JavaScript

1 {readyState:4,responseText:Correcto

Cuando sto sucede y el callback que es lanzado es


el error y no el success, el problema 99% es porque
el JSON retornado desde el servidor no tiene un
formato correcto.
Saludos.
Responder

Joaquin

Autor

30 Octubre, 2014

Gracias, entonces voy a buscar por el lado de


que el formato JSON es incorrecto, en cuanto
lo resuelva comento como me fue, muchas
gracias
Responder

Joaquin

31 Octubre, 2014

Hola, ya lo resolvi, tal como me dijiste el Formato JSON era


incorrecto, esto se debia a que me faltaba agregar la
propiedad
curl_setopt($handler, CURLOPT_RETURNTRANSFER, 1);
para que el resultado se almacenara en la variable $response
correctamente
sin esta propiedad me parece que se muestra el resultado de
la pagina y no se almacena en la variable, sino que en la
variable se almacenaba true o false dependiendo si se

ejecuto correctamente la instruccion, y el resultado quedaba


fuere del formato JSON, y de ahi el error
$response = curl_exec ($handler);
Muchas gracias por tu ayuda, y de nuevo que buen turorial!!
Responder

israel965

Autor

31 Octubre, 2014

Gracias por el dato y por tomarte la molestia de


decir cul era el problema, me alegro que lo hayas
podido solucionar, estoy seguro que nunca ms
tendrs ese problema.
Saludos Joaquin.
Responder

Joaquin

Autor

31 Octubre, 2014

Gracias a ti
Me hace falta estudiar mucho para evitar
futuros errores de este tipo
Saludos Israel
Responder

israel965

Autor

31 Octubre, 2014

Es la mejor forma de aprender bajo mi


punto de vista, equivocarse y
solucionarlo por uno mismo :).
Responder

jankarlos

6 Noviembre, 2014

es que no puedo subir archivos mayor a 2m y cree un archivo


htaccess con php_value upload_max_filesize 40M

php_value post_max_size 40M asi no mas no se si tal vez al


archivo haya que escribire cdigo de mas? y pues lo guarde
en la carpeta principal, pues el formulario lo tengo es es otra
carpeta!
Responder

israel965

Autor

7 Noviembre, 2014

Prueba a modificar esos valores en tu php.ini.


Saludos.
Responder

jankarlos

Autor

7 Noviembre, 2014

gracias ya lo soluciones con el php.ini


Responder

sact

10 Noviembre, 2014

Bueno muchas gracias por el tutorial y que este si me


funciono muy bien, pero ahora tengo una pregunta si quiero
que el script suba la fotografia a una carpeta en especifico
que parte se tiene que modificar para que haga esto?
De antemano muchas gracias por la ayuda prestada con el
tutorial este.
Responder

Joaquin

10 Noviembre, 2014

tienes que modificar esta parte


PHP

1
2
3
4
5

if(!is_dir("files/"))
mkdir("files/", 0777);

//comprobamos si el archivo ha subido


if ($file && move_uploaded_file($_FILES

cambia files/ por la carpeta que quieras, ya sea una


ruta relativa o absoluta
Responder

sact

12 Noviembre, 2014

A muchas gracias por contestar y si ya lo


modifique donde decias y ya guarda los archivos
en la carpeta que necesitaba usar para eso .
Gracias por la ayuda
Responder

Repto

13 Noviembre, 2014

Muy bueno el tutorial para subir archivos al servidor, pero yo


tengo una pregunta como le tengo que hacer para que solo se
puedan subir cierto tipos de archivos, por ejemplo para que
solo se puedan subir archivos PDF y nada mas?
Responder

israel965

Autor

13 Noviembre, 2014

Hola,
Lo mejor es que la comprobacin la hagas en el
servidor.
PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$finfo = finfo_open(FILEINFO_MIME_TYPE
$mime = finfo_file($finfo, $_FILES['archivo'
$isPdf = false;
switch ($mime) {
case 'application/pdf':
$isPdf = true;
default:
die("Tipo de archivo no permitido"
}

if($isPdf === true)


{
//es pdf
}

As sabrs si es o no pdf, nunca te fes del cliente ya


que se puede alterar la informacin, aparte de
problemas con <=ie9 Saludos.
Responder

Marcela

19 Noviembre, 2014

Muy buen post. Lo implement y funciona 10 puntos. Slo


una consulta: como hago para agregarle un progressbar
(porque es para subir videos). Desde ya, muchas gracias.
Responder

israel965

Autor

19 Noviembre, 2014

Hola,
Si necesitas algo visual te recomiendo dropzone,
tiene todo lo que necesitas.
Saludos.
Responder

sact

21 Noviembre, 2014

Buenas ya volvi por aqui y es que ahora tengo otro problema,


la parte de la subida de archivos ya la maneja bien el proyecto
que estoy desarrollando, pero el problema es que me pidieron
que lo pasara a windows y ahora no sube los archivos, cosa
que hacia cuando lo corria en linux.
As que vengo de nuevo a ver si alguien me puede ayudar con
este problema ahora, de nuevo muchas gracias por la ayuda
prestada.
Responder

israel965

Autor

21 Noviembre, 2014

Hola,
El ejemplo del tutorial est hecho y probado tanto
en windows como en linux, qu errores tienes?
Responder

sact

Autor

21 Noviembre, 2014

Esa es la parte que no se, por que estube


verificando el funcionamiento del script y no
crea la carpeta que contendra los archivos, y
de igual manera si ya carpeta que contendra
los archivos ya se encuentra en el servidor no
se suben los archivos a este.
Responder

sact

Autor

25 Noviembre, 2014

Gracias por la ayuda ya encontre cual era


el error, todo era una configuracion del
servidor que estaba mal realizada, pero ya
corrigiendo eso ya funciona de las mil
maravillas el script
Responder

msolis86

6 Diciembre, 2014

Hola, funciona de 10 en una pc de escritorio, cuando lo


ejecuto desde el navegador de mi celular sale una leyenda
No se ha podido completar la operacin anterior por falta de
memoria. Tienes idea de como se podra solucionar eso? o
si existe alguna libreria para subir imagenes desde los
celulares con php?
Responder

Juan

8 Diciembre, 2014

Solucionates?
Responder

msolis86

9 Diciembre, 2014

no lo solucion an!!! alguna sugerencia?


Responder

Sajies26

16 Diciembre, 2014

Excelente aporte. me gustara cambiar en el boton y


etiqueta
Seleccionar Archivo por Examinar
y Ningn archivo seleccionado por Ningun Archivo
busque en los js y no se donde hacerlo, gracias
Responder

israel965

Autor

16 Diciembre, 2014

Hola,
Te recomiendo este plugin para cambiar el diseo
de los campos de tipo file.
Saludos.
Responder

Esteban

27 Diciembre, 2014

Muy bueno el artculobien explicado y el cdigo se entiende


perfectamente
Gracias !
Responder

israel965

Autor

Muchas gracias.

27 Diciembre, 2014

Responder

Josep

29 Diciembre, 2014

Por favor me puedes ayudar a resolver un inconveniente que


tengo?? Vers no se est recibiendo el formulario en el
archivo upload.php. Me aparece un error de que no se
reconoce la variable archivo, y por tanto no se almacena el
archivo.
A qu se debe este error?? Gracias por tu pronta respuesta.
Responder

israel965

Autor

29 Diciembre, 2014

Hola,
La variable archivo es el nombre del campo de tipo
file del formulario.
Revisa los pasos porque funciona correctamente.
Saludos.
Responder

Jose

23 Febrero, 2015

Ya lo he solucionado tena mal una etiqueta id en el input file.


Saludos y de nuevo gracias por compartir el cdigo, me ha
sido de mucha utilidad.
Responder

Adrian Bergonzi

5 Marzo, 2015

Hola, entiendo todo el cdigo pero no me funciona, el error


logr saber cual era despus de mucho probar, a
continuacin lnea y error o motivo porque no lo carga.
var formData = new HTMLFormElement($(.formulario)[0]);

TypeError: Illegal constructor.


gracias.
Responder

israel965

Autor

5 Marzo, 2015

Hola,
new HTMLFormElement($(.formulario)[0])???
No es new FormData($(.formulario)[0])?
Saludos.
Responder

Adrian Bergonzi

Autor

5 Marzo, 2015

Si, es que confund cuando me salt el primer


error es sobre esa pero el error es el siguiente
ypeError: Argument 1 of FormData.constructor
does not implement interface
HTMLFormElement.
Responder

israel965

Autor

5 Marzo, 2015

Hola,
Puedes utilizar append de la siguiente
forma sin pasar parmetros al
constructor.
JavaScript

1 var formData = new FormData(


2 formData.append('file', $('input[type=file]'

Saludos.
Responder

Adrian Bergonzi

Autor

Marzo, 2015

Hola, si funciona, igual retom es


problema anterior porque no me
poda quedar con la duda, tena una
etiqueta con la clase formulario y
ese era el error, ya funciona de la
dos formas, muchas gracias, ahora
quiero anexarle una barra de
progreso, tengo que ver donde se lo
agrego y como.
Gracias Israel

israel965

Autor

5 Marzo,

2015

Hola,
Aunque parezca que sea
empezar de nuevo, esta entrada
te puede ser muy til, esta otra
con dropzone tambin te puede
servir.
Saludos.

Enrique Hellmers

11 Marzo, 2015

Me encanta pues el codigo es limpio y sencillo, pero no me


anda! Porque seria?
Responder

Enrique Hellmers

11 Marzo, 2015

Ya lo logre! No me cargaba la hoja de functions.js. Mil


gracias!!!

Responder

Ariel

12 Marzo, 2015

Muchas gracias! Me es de mucha utilidad para una parte que


no poda resolver.
Abrazo grande!
Responder

israel965

Autor

13 Marzo, 2015

Muchas gracias Ariel,


Tienes un blog muy elegante y con material
interesante.
Saludos.
Responder

Arturo Gonzalez

20 Mayo, 2015

Saludos master: quisiera saber como se podria implementar


una barra de progreso a este script, me podrias orientar??
Responder

israel965

Autor

20 Mayo, 2015

Hola,
Este tutorial hace justamente lo que necesitas.
Saludos.
Responder

Elisabeth

26 Mayo, 2015

Hola Israel!
Llevo varias semanas leyendo tutoriales de tu web, y me han
sido de gran ayuda. Me he empapado de jquery, ajax, json

aunque an no lo suficiente, porque tengo algunas lagunas.


Estoy haciendo un formulario con php y jquery, envo los
datos va post con AJAX, y mi problema surge cuando quiero
enviar ms de una imagen.
Los campos input file, se van creando automticamente con
jquery, a medida que el usuario va seleccionando imgenes, y
luego, me quedo atascada, ya que no s cmo enviar todos
esos nuevos campos a travs de mi formData.
He seguido este tutorial, pero adaptado a Codeigniter, que es
como estoy haciendo mi web. Es decir, he usado la libreria
upload, para subir las imgenes.
Me puedes iluminar?
Gracias!
Responder

israel965

Autor

26 Mayo, 2015

Hola,
Para subida masiva te recomiendo dropzone, te vas
a ahorrar muchas horas de trabajo, aqu tienes un
videotutorial donde lo implementamos con php,
pasarlo a codeigniter es sencillo.
Saludos.
Responder

Elisabeth

Autor

26 Mayo, 2015

Muchas gracias Israel,


Lo haba visto, pero como ando un poco verde
con el tema de CodeIgniter, jQuery y dems,
quera implementarlo por m misma y as
aprender.
Ya he conseguido hacerlo, de todas formas, lo

intentar con Dropzone en estos das


Responder

Manuela

1 Julio, 2015

Ante todo, gracias por el post, pues es justo lo que


necesitaba. Tan slo me surge una duda, y es que al hacer
click en el botn del formulario, se ejecutan dos peticiones al
servidor, y no se a que se debe. Alguna idea de su causa y/o
como solucionarlo?
Un saludo y buen trabajo
Responder

israel965

Autor

1 Julio, 2015

Hola,
Lo mejor que puedes hacer en esos casos es
deshabilitar el botn y no est de ms utilizar
stopPropagation.
JavaScript

1 $( "button" ).prop( "disabled", true )


2 e.stopPropagation();

Saludos.
Responder

Manuela

Autor

3 Julio, 2015

Gracias por tu respuesta, pero sigue realizando


las dos peticiones de manera automtica.
Coloqu las dos instrucciones que dijiste
dentro del $(:button).click(function(event) y
aun as nada.
Si se te ocurreo algn otro motivo, soy toda

oidos.
Saludos
Responder

Manuela

Autor

7 Julio, 2015

Hola de nuevo, ya lo he solucionado, el


comportamiento duplicado se deba a que
tena el script embebido dentro del cdigo
html y me estaba dando problema. Al
sacar el cdigo a un fichero externo, se
me ha solucionado y funciona
perfectamente.
Lo comento por si hay alguien que le
suceda lo mismo.
Saludos y gracias
Responder

israel965

Autor

7 Julio, 2015

Gracias por aportar tu solucin.


Saludos.

Andres Felipe Hinojosa

8 Julio, 2015

Buenas Tardes,
Te felicito por el cdigo muy simple de entender, pero tengo
una duda, en un formulario que tenga mas archivos, intento
crear un objeto para enviarlo pero no me funciona, lo intento
as:
tambin lo intente con la solucin que dieron anteriormente :
var formData = new FormData($(form#formformulario)[0]);
pero tampoco me funciona, si tiene alguna solucin le

agradecera mucho.
Muchas gracias.
Responder

Andres Felipe Hinojosa

8 Julio, 2015

http://fotos.subefotos.com/892642d5e74075f40bae7925880e8c5bo.png
que pena tantos mensajes, si no que no encontraba
como subir imagenes me generaba error ese es el
link =P
Responder

Fabio

14 Julio, 2015

Hola,
Existe la posibilidad de enviar la informacin mediante ajax a
un controlador de CodeIgniter, para luego subir el archivo
mediante CodeIgniter propiamente?
Supongo que ser igual, enviando por post el archivo al
controlador, pero por mas que le hago no puedo; no
encuentro ni errores ni nada en el script y el explorador no me
tira ningn error en consola.
Gracias.
Responder

Daniel

18 Julio, 2015

Esto ya tiene aos pero es el mejor que me he encontrado.


Lastima que IE de 9 para abajo no lo ejecuta , habr que hacer
algunas modificaciones, pero es un gran ejemplo
Gracias por el aporte
Responder

israel965

Autor

18 Julio, 2015

Hola,
Muchas gracias, aqu tienes otra entrada que es
compatible, utilizamos un plugin que lo hace todo
de forma dinmica.
Saludos.
Responder

Daniel

18 Julio, 2015

De nuevo gracias por ambos aportes.


Sigue sin funcionar en IE9 al menos e emulado en las
herramientas de desarrollo y la barra de progreso se queda en
cero % en todos los navegadores que tengo mozilla, opera ,
chrome, IE.
Pero es multi selector, basta un solo input file y darle multiple
Saludos
Responder

Marina

13 Noviembre, 2015

Hola !Muchas gracias por el aporte, es muy bueno. Quera


consultarte respecto al index del form. Dado que tengo una
pgina que genera por medio de PHP un formulario por cada
posible archivo a reemplazar (una imagen a cambiar por
otra), cuando envo el formulario slo funciona el primero, y
no encuentro la manera de pasarle el Nro de formulario o
modificar el id, lo hago con PHP pero no se mucho javascrip
como para saber como leer el id del formulario, el cual est
compuesto por php
As envo la cabecera del form:
pero en el js, no se como reemplazar el [0] por el contenido de
$i, o tambin podra cambiar el nombre de la clase con PHP
pero tampoco se como leerla desde el js

var formData = new FormData($(.formulario)[0]);


Si me pueden dar una manodesde ya muchas gracias
Marina
Responder

israel965

Autor

14 Noviembre, 2015

Hola,
Cuando haces submit de un formulario, con jQuery
puedes hacer lo siguiente.
JavaScript

1
2
3
4
5
6
7

$(document).ready(function(){
$("form").on("submit", function(e)
e.preventDefault();
var form = $(this); //este es el formulario sobre el que hayas h
console.log(form.serialize());
})
})

Saludos y espero que te sirva.


Responder

Karina

13 Noviembre, 2015

Un genio. Gracias por el aporte. Junte tu cdigo con Jproc y


quedo espectacular !!! Gracias de nuevo!!
Responder

israel965

Autor

14 Noviembre, 2015

Muchas gracias, me alegro que te haya servido.


Responder

Manuel

18 Noviembre, 2015

Hola
Por los ficheros php que hablas, he de entender que estas