Anteriormente publiqué este tutorial, debido a la gran cantidad de consultas he decidido publicar las respuestas y su actualización a una versión más moderna.
Implementación básica
Lo primero es descargar el plugin de la página de su creador http://www.uploadify.com/download/ esta última versión tiene varias opciones adicionales como la posibilidad de subir múltiples archivos, agregar eventos durante la carga, cuando se completa o cuand se produce un error además puede usar un archivo flash para mostrar el avance de la subida. Recomiendo leer su documentación, bastante completa por cierto, para ver las distintas posibilidades del plugin.
Para nuestro ejemplo básico basta con añadir las dependencias y el propio plugin en otras palabras llamamos a la librería jquery, al swfobject.js y al plugin(jquery.uploadify.v2.1.0.min.js), el único código HTML que necesitamos es:
1 | <input type="file" name="fileInput" id="fileInput" /> |
Para que este simple input se convierta en nuestro uploader ajax añadimos en siguiente código en la cabecera:
1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript">// <![CDATA[ $(document).ready(function() { $('#fileInput').uploadify({ 'uploader' : 'uploadify.swf', 'script' : 'uploadify.php', 'cancelImg' : 'cancel.png', 'auto' : true, 'folder' : '/uploads' }); }); // ]]></script> |
Esta demás decir que debemos verificar bien las rutas de los archivos y el id de nuestro input file. Lo que allí especificamos en la ruta de nuestro archivo .swf que se encuentra en el ejemplo que acompaña el plugin, el archivo uploadify también esta presente aunque luego explicaré como hacer más cosas con este.
Ahora vamos a las dudas:
¿Cómo hago para que muestre una respuesta una vez subido el archivo?
Este plugin incluye algunos eventos que nos permite ejecutar un procedimiento cuando se completa la carga.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript">// <![CDATA[ $(document).ready(function() { $('#fileInput').uploadify({ 'uploader' : 'uploadify.swf', 'script' : 'uploadify.php', 'cancelImg' : 'cancel.png', 'auto' : true, 'folder' : 'uploads', 'onComplete': function(event, queueID, fileObj, response, data) { alert("Se subió satisfactoriamente"); $('#midiv').append("Se subió correctamente"); } }); }); // ]]> </script> |
En el ejemplo estoy usando un alert y a continuación un append para que muestre un mensaje dentro del div con id «midiv», puedo colocar animaciones o lo que se me ocurra siempre y cuando este dentro de la función onComplete.
¿Cómo hago que se grabe en una base de datos y que PHP genere una respuesta?
Esta demás decir que el proceso depende de la estructura de tu base de datos sin embargo puedo dar algunas pistas, nuestro archivo uploadify necesita una estructura como esta:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php if (!empty($_FILES)) { $tempFile = $_FILES['Filedata']['tmp_name']; $file_name = $_FILES['Filedata']['name']; $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/'; $targetFile = str_replace('//','/',$targetPath) . $file_name; if (move_uploaded_file($tempFile,$targetFile)){ // Aqui escribiriamos toda la conexion de base de datos // Y ejecutariamos una consulta tipo INSERT INTO mitabla (micampo) VALUES ($file_name); echo 'Tu archivo se subió correctamente'; } else { echo 'Tu archivo falló'; } } ?> |
Si se fijan en el ejemplo he colocado un echo indicando que se subió correctamente y otro con el error, para mostrarlos en nuestro javascript debería quedar así:
1 2 3 | 'onComplete': function(event, queueID, fileObj, response, data) { $('#fotosWrapper').append(response); } |
Donde response es justamente el valor de ese «echo»
¿Cómo envio más parámetros y no solo la imagen?
Suponiendo que queremos enviar un campo de texto con id «mitexto» (si necesitas enviar más los separas por comas)
1 | <input type="text" name="mitexto" id="mitexto" size="30" /> |
Basta con capturar su valor, quedando algo asi ese parametro adicional:
1 | 'scriptData' : {'texto': $("#mitexto").val()}, |
Y capturariamos su valor en PHP con algo como:
1 | echo $_POST['texto']; |
Fijense bien en el nombre que toma la variable
Finalmente pueden descargar los archivos de este tutorial AQUI
Hola ,quisiera saber como puedo enviar y recibir parametros por que pruebo con get o post y no obtengo el valor siguiendo tu ejemplo.
Hola, estoy probando la funcion para pasar parametros pero no envia los parametros, solo los envia cuando escribo el parametro y pero cuando intento enviar un parametro del formulario no funciona si me puedes ayudar gracias.
Los parametros adicionales llegan como variables POST, sobre el formulario asegurate que el ID sea el correcto, en el archivo de ejemplo envio una variable como muestra. He actualizado el post para explicarlo un poco más el tema, fijate que el id no es el nombre de la variable que se envía.
Hola, que tal, los parametros adicionales no estan llegando, me baje tu ejemplo y tampoco funciona, no se si a tu puedes enviar los parametros adicionales sin problemas.
Saludos
Miguel, ya lo pude hacer funcionar hay que modificar los setting del uploadify a parte, porque sino se envía antes de que se pueda capturar el valor con el .val() , Ejem:
$(‘#enviar’).click(function () {
$(«#uploadify»).uploadifySettings(‘scriptData’,{‘texto’: $(«#mitexto»).val()});
$(‘#uploadify’).uploadifyUpload();
});
Y en la configuración principal puedes enviar blancos, Ejem: ‘scriptData’ : {‘texto’: »},
Ojala les sirva ya que he estado un día entero viendo porque no funciona.
Saludos
Hummm buena noche,, me presenta el siguiente error
Mockus.jpg (15KB) – IO Error ! quede perdido.
Gracias de antemano
Ese es un error cuando no se puede leer un archivo, asegurate que la ruta sea correcta y que el archivo no este dañado o sus permisos te permitan su lectura.
Eduardo, entendi lo que dices que obviamente no alcanza a cargar el .val() pero puedes poner completo el codigo por favor porque no entiendo lo de $(«#enviar»).click ni lo de $(«#uploadify»).uploadifyUpload();
Gracias
Hola a todos,
Estoy tratando de crear una consulta AJAX despues del onComplete pero no funciona, alguien sabe por que?
\’onComplete\’ : function(event, ID, fileObj, response, data) {
var idsusuario=$(\’#idusuario\’).val();
var option=\’addPhoto\’;
var photo=fileObj.name;
$.ajax({
type: \
Buenas tardes amigo muy interezante tu articulo lo logre correr y guardarlo en db , el unico problemas es cuando. paso la un parametro de text al archivo uploadify.php me toma el mismo valor simpre este caso estoy utilizando un select
select name=»mitexto» id=»mitexto»>
Carcasas
Estuches
</select
'scriptData' : {'mitexto': $("#mitexto").val()},
Como lo puedo acomodar ?
Buenas tardes amigo.Lo logre correr y guardarlo en db,el unico problemas es cuando.paso la un parametro de txt al archivo uploadify.php me toma el mismo valor simpre VALUE=\’CASA\’ utilizo un select
hola, excelente tutorial pero tengo una duda…
¿como se hace para que no envie el archivo tan pronto lo suban sino que espere el submit de todo el formulario??
de antemanos gracias por tu ayuda.
hola, gran post
pero soy nuevo en esto y no entiendo bien algunas cosas, te importaria poner el codigo en plan para q fuese copiar y pegar y ver como funciona ya q necesito adaptralo a un proyecto y asi se me hace un poco dificil de digerir
muchas gracias
Se puede usar otro uploader que no sea el .swf que tiene el tutorial. De poderse como seria con un boton cualquiera
man, cuando subo todo a mi servidor y tiene los permisos 777 luego cuando termina de subir el archivo me arroja el error «Tu archivo falló»
Dime a que se debe esto
man, cuando subo todo a mi servidor y tiene los permisos 777, luego cuando termina de subir el archivo me arroja el error -Tu archivo falló-
Buenas,
No me funciona el:
‘scriptData’,{‘texto’: $(“#mitexto”).val()}
¿alguien me/nos puede pasar un ejemplo que le funcione?
Gracias
Hola muy buenas tardes he implementado la libreria y todo pero no me pasa los value de un input text al otro archivo php y si lo hago manual determinar el value si lo pasa por que?
otra cosa cuando paso por ajax tambien el valor me dice undefines variable
Un favor puede pasar el el fla del uploadify.swf para poder editarlo 😀 se te agradeceria mucho
En el sitio oficial esta la solucion del scripdata
http://www.uploadify.com/forums/discussion/5625/problems-sending-data-to-php-with-scriptdata/p1
saludos!!! 😀
Buenas estoy teniendo problemas con el pluggin, luego de seleccion el archivo me colocan un error : IO Error, a que se debe esto?
oye que tal, me gustaria saber si puedo obtener el nombre de la imagen para guardarlo en el value de un campo para su uso posterior, ya intente guardarlo en una variable de php pero al utilizarla despues me deja simplemente $(‘#opcion2’).append(response); y no el nombre, como podria hacerlo?
muy muy buena el aporte me sirvio arto el pluging
Es genial justo lo que estaba buscando !!
esta bueno lastima que use flash, por lo que depende de que el usuario lo tenga o no instalado
mal mal mal mal mal mal, entiendo que la intencion es buena pero la parte de enviar datos de un formulario es absolutamente ‘vaga’ e incompleta, les recomiendo aque vayan a la documentacion oficial EDUARDO se acerca bastante a la forma correcta sol que en vez de usar ‘scriptdata’ se utiliza ‘formdata’
voy a probarlo talves sirva, ya he probado como 50 y ninguno funciona…