Upload con Ajax y Jquery (Uploadify)

alette666 · #1 (**permalink**) 23/08/2011, 12:34

Hola gente forera, hace meses que no toco el foro

*****************
Tuve que postear de nuevo el tema porque lo había puesto en la sección de JavaScript (no era alli)
*****************
verán, quiero implementar un upload en mi web site pero tengo un problema; no carga en el servidor pero en la red local (localhost) con apache lo hace sin problemas; cuando voy a la carpeta de uploads; no encuentro ningún archivo subido, paso a crearles el código fuente.

ELEMENTOS:
**********
Libreria Jquery (jquery-1.4.3.min.js, jquery.uploadify.v2.1.0.min.js y swfobject.js)
Boton flash (uploadify.swf)
Script php (uploader.php)
una pagina de prueba (index.html)
una carpeta para subir los archivos (uploads)
********************************
BIEN COMENCEMOS:

1.) Creamos una carpeta llamada "uploads" y le damos permiso de escritura 755 ó 777.

2.) index.html

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Uploader Plugin</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#fileInput').uploadify({
		'uploader'  : 'uploadify.swf',
		'script'    : 'uploader.php',
		'cancelImg' : 'cancel.png',
		'auto'      : true,
		'folder'    : 'uploads/',
		'scriptData' : {'texto': $("#mitexto").val()},
		'onComplete': function(event, queueID, fileObj, response, data) {
 		    $('#fotosWrapper').append(response);
		}
	});
});
</script>
</head>
<body>
<input type="text" size="25" name="mensaje" id="mitexto" />
<input type="file" name="fileInput" id="fileInput" />
<div id="fotosWrapper">&nbsp;</div><!--/Aqui* va el mensaje de respuesta/-->
</body>
</html>

Creamos el formulario que nos permitirá buscar y seleccionar nuestro archivo a subir al servidor.

3.) uploader.php

Código PHP:

  <?php

if (!empty($_FILES)) {

    $tempFile = $_FILES['Filedata']['tmp_name'];

    $file_name = $_FILES['Filedata']['name'];    

    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/uploads';

    $targetFile =  str_replace('//','/',$targetPath) . $file_name;    

    if (move_uploaded_file($tempFile,$targetFile)){

        echo 'Tu archivo se subió correctamente '.$_POST['texto'];

    } else {

        echo 'Tu archivo falló';

    }

}

?>

Chequeamos de que los archivos cumplan.

DESCARGAR EL PROYECTO YA REALIZADO "AQUI"

Ahora cual es mi problema?
Es que cada vez que quiero subir un archivo al servidor (teniendo los permisos 777 ó 755), este me arroja "Tu archivo falló" y si voy a la carpeta uploads; no encuentro nada, ni un archivo subido al servidor, y en "localhost" anda bárbaro; probe con URL absolutas, pero nada de nada.

Alguien podría echar una mano? se lo agradecería es para un proyecto en mi web

maycolalvarez · #2 (**permalink**) 23/08/2011, 16:54

Consulta las políticas del foro, si deseas mover un tema debes de reportarlo a un moderador

alette666 · #3 (**permalink**) 23/08/2011, 17:12

Cita:

Iniciado por maycolalvarez

Consulta las políticas del foro, si deseas mover un tema debes de reportarlo a un moderador

Ok, gracias pero ya lo puse acá (que es el lugar donde debería estar)
y leí detenidamente las políticas. no hay respuesta para mi preg??

maycolalvarez · #4 (**permalink**) 23/08/2011, 17:17

verificaste que la directiva upload_max_filesize de php tenga lo suficiente, debido a que por defecto solo permite archivos menores de 2M (megabytes)

alette666 · #5 (**permalink**) 23/08/2011, 18:08

Cita:

Iniciado por maycolalvarez

verificaste que la directiva upload_max_filesize de php tenga lo suficiente, debido a que por defecto solo permite archivos menores de 2M (megabytes)

Disculpa pero en que parte del php debo meterlo?

caricatos · #6 (**permalink**) 23/08/2011, 18:26

Cita:

Iniciado por alette666

...que es el lugar donde debería estar...

En eso discrepo, ya que todos sabemos que con Ajax no se pueden subir archivos (me refiero al objeto XMLHttpRequest)... y las argucias de las librerías mejor se ven donde las librerías (por eso movemos el tema).

Saludos

alette666 · #7 (**permalink**) 23/08/2011, 18:30

Cita:

Iniciado por caricatos

En eso discrepo, ya que todos sabemos que con Ajax no se pueden subir archivos (me refiero al objeto XMLHttpRequest)... y las argucias de las librerías mejor se ven donde las librerías (por eso movemos el tema).

Saludos

caricatos, me dices que entonces ese sistema que descargue desde http://www.uploadify.com/ no funciona??

caricatos · #8 (**permalink**) 23/08/2011, 18:49

Hola:

Verás, sin tecnologías externas (applets, flash...) solo se pueden subir archivos con un formulario y un botón submit; y todo lo que veas sobre subir archivos con Ajax, no es más que una simulación.

La cabecera necesaria no la soporta el objeto Ajax... incluso soportándola, la forma de pasar datos con los objetos Ajax es insertando contenidos, y javascript no tiene acceso a los sistemas de los usuarios para obtener la información binaria de los ficheros.... no voy a estudiar el código que tienes, pero ya lo hemos discutido en muchas ocasiones, y esa es la conclusión...

Saludos

alette666 · #9 (**permalink**) 23/08/2011, 18:53

Cita:

Iniciado por caricatos

Hola:

Verás, sin tecnologías externas (applets, flash...) solo se pueden subir archivos con un formulario y un botón submit; y todo lo que veas sobre subir archivos con Ajax, no es más que una simulación.

La cabecera necesaria no la soporta el objeto Ajax... incluso soportándola, la forma de pasar datos con los objetos Ajax es insertando contenidos, y javascript no tiene acceso a los sistemas de los usuarios para obtener la información binaria de los ficheros.... no voy a estudiar el código que tienes, pero ya lo hemos discutido en muchas ocasiones, y esa es la conclusión...

Saludos

Muchísimas gracias caricatos, me pondré a ver que otros sistemas que no tengan ajax u algo raro para poder subir archivos

caricatos · #10 (**permalink**) 23/08/2011, 19:37

Hola:

No digo que dejes de usar el sistema que tenías pensado usar, si para tí es efectivo; solo que las librerías tienen sus características, y se distancian de los objetos Ajax normales... de todos modos la forma de subir archivos siempre ha sido con controles file y un formulario con sus características propias (métod, enctype...); y si el target es un iframe oculto, puede parecerse al comportamiento Ajax (asincrono y sin recargar la página).

Saludos

alette666 · #11 (**permalink**) 23/08/2011, 20:33

Cita:

Iniciado por caricatos

Hola:
Saludos

caricatos gracias nuevamente; lo que pasa es que cuando uso este sistema desde mi pc y lo trabajo en forma local con apache, cuando lo ejecuto me carga los archivos en la carpeta que seleccione; pero cuando llevo ese mismo sistema (sin cambiar nada) y le doy permiso de escritura al directorio, este me carga (porque veo la barra de progreso) y al final me arroja el error de que mi archivo a fallado; no se que estaría haciendo mal

KoswiDigital · #12 (**permalink**) 24/08/2011, 06:52

Hola, yo utilizo uploadify en algunas páginas y bueno, funciona perfectamente y es muy cómodo, ya que te permite seleccionar más de un archivo (gracias Flash!).

Ahora, tu problema puede estar en la configuración del php.ini, donde tienes que cerciorarte de tener las líneas:

upload_max_filesize = 2MB (recomendado, ya que es bastante de por sí)
max_file_uploads = n (donde n es el número de archivos que te permitirá subir)

También te recomiendo utilizar imagedestroy() en tu archivo php, sino es posible que que no pase del segundo archivo sin dar error. Y es que hay que ahorrar recursos :)

Un saludo.

alette666 · #13 (**permalink**) 24/08/2011, 09:04

Cita:

Iniciado por KoswiDigital

También te recomiendo utilizar imagedestroy() en tu archivo php, sino es posible que que no pase del segundo archivo sin dar error. Y es que hay que ahorrar recursos :)

Un saludo.

Tenes el proyecto a mano???
1. ¿como creo l archivo *.ini ?

porque soy primerizo en estos sistema de upload; me echarías un cable??? porque es para un proyecto

Dime que es lo que tengo que hacer con exactitud

KoswiDigital · #14 (**permalink**) 24/08/2011, 10:26

Primero pregunta en el centro de soporte de tu hosting si tienes habilitadas esas 2 variables del php.ini (este archivo ya existe, es la configuración base de php y lo tiene tu servidor). Solicítales a ellos que modifiquen ese archivo. Si tienes un hosting de pago, probablemente puedas hacerlo tú, pero si se lo solicitas a ellos te lo harán sin problemas.

Te dejo un ejemplo que tengo hecho para un panel de administración:

Código HTML:

Ver original<html>
<head>
<link href="/_js/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/_js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/_js/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
$(document).ready(function()
{
$('#file_upload').uploadify(
    {
        'uploader'  : '/_js/uploadify/uploadify.swf',
        'script'    : './scripts/newfoto.php',
        'cancelImg' : '/_js/uploadify/cancel.png',
        'fileExt'   : '*.jpg;*.jpeg',
        'fileDesc'  : 'Sólo imágenes .jpg , .jpeg',
        'method'    : 'post',
        'multi'     : true,
        'onSelect'    : function()
        {
            $('.sendoc').show();
            $('#file_upload').uploadifySettings('scriptData' , { 'galeria': $('#selgal').val() });    
        },
        'onAllComplete' : function(data)
        {
            $('.sendoc').hide();
            alert( 'Todas las imágenes han sido agregadas correctamente' );
        }
    });
});
</head>
<body>
<!-- Aquí va un select, del cual sacamos el valor para enviar al php -->
</body>
</html>

Código PHP:

Ver original<?php
    $root = $_SERVER['DOCUMENT_ROOT'];
    include($root.'/_scripts/db_connect.php');
    
    if (!empty($_FILES))
    {
        $galeria = $_POST['galeria'];
        $tempFile = $_FILES['Filedata']['tmp_name'];
        $targetPath = $root.'/img/galleries/'.$galeria.'/';
        $fileName = $_FILES['Filedata']['name'];
        $targetFile = $targetPath.$fileName;
    
        move_uploaded_file($tempFile , $targetFile);
        
        $origen = imagecreatefromjpeg($targetFile);
        $x = imagesx($origen);
        $y = imagesy($origen);
        $nx = 120;
        $ny = $y*$nx/$x;
        $destino = imagecreatetruecolor(120,120);
        
        $posx = (120 - $nx) / 2;
        $posy = (120 - $ny) / 2;
 
        imagecopyresized($destino,$origen,$posx,$posy,0,0,$nx,$ny,$x,$y);
        
        $destino_tn = $targetPath.'tn_'.$fileName;
        
        imagejpeg($destino , $destino_tn , 100);
        
        $tn = 'tn_'.$fileName;
 
        $peticion = "insert into `gallery_".$galeria."` (img,tn) values ( '$fileName' , '$tn' )";
        $datos = mysql_query($peticion);
        
        imagedestroy($targetFile);
        mysql_free_result($datos);
        mysql_close($link);
        exit();
    }
 
    // este script se ejecutará una vez por cada archivo, de ahí que sea importante
    // utilizar imagedestroy(). En este ejemplo, introducimos fotos en una galería o
    // álbum, redimensionando primero una copia en miniatura y un canvas, centrando
    // la miniatura en el canvas y luego enviando los datos a mysql.
 
    // es un script bastante sencillo y muy útil para el upload masivo de imágenes con 
// redimensionamiento.
?>

Un saludo.

alette666 · #15 (**permalink**) 24/08/2011, 10:38

Cita:

Iniciado por KoswiDigital

Un saludo.

La cosa es que mi hosting es gratuito (y menos ingles que libro de petete tengo), pero ese archivo INI va sin ligue a nada?? es decir que lo pongo en dnd tengo todos los archivos de uploadify??

KoswiDigital · #16 (**permalink**) 24/08/2011, 12:24

Depende el hosting, puede que te lo pongan o no. Ese archivo es parte de la configuración de php y no tienes acceso a él. La única manera de modificarlo es hablando con el servicio de soporte. Tú prueba, el "no" ya lo tienes.

Utiliza un traductor (http://traductor.google.es/) para realizar tu solicitud.

alette666 · #17 (**permalink**) 24/08/2011, 12:31

Cita:

Iniciado por KoswiDigital

Depende el hosting, puede que te lo pongan o no. Ese archivo es parte de la configuración de php y no tienes acceso a él. La única manera de modificarlo es hablando con el servicio de soporte. Tú prueba, el "no" ya lo tienes.

Utiliza un traductor (http://traductor.google.es/) para realizar tu solicitud.

ok muchísimas gracias Koswi

KoswiDigital · #18 (**permalink**) 24/08/2011, 12:38

No hay de qué :)

maycolalvarez · #19 (**permalink**) 24/08/2011, 13:34

Cita:

Iniciado por KoswiDigital

También te recomiendo utilizar imagedestroy() en tu archivo php, sino es posible que que no pase del segundo archivo sin dar error. Y es que hay que ahorrar recursos :)
Un saludo.

imagedestroy() solo aplica cuando creas un recurso de GD, de lo contrario es irrelevante para un upload que solo se limite a copiar.

KoswiDigital · #20 (**permalink**) 24/08/2011, 15:20

Si, bueno, en ese script se ve el uso de la librería gd. Ya comentaba que es un script que ya había hecho para un panel de administración.

En todo caso, si no hay que tratar las imágenes, claro que no es necesario utilizarlo. Se me escapó decirlo :)

Un saludo.

edito: Me acabo de dar cuenta que lo mencioné (lo del imagedestroy) en el post anterior al del script, y perdonad, pero ya relacioné directamente el uploadify con la subida de imágenes... Que es para lo que yo lo he utilizado en todas las ocasiones. La costumbre, que no siempre es buena ^^

alette666 · #21 (**permalink**) 24/08/2011, 17:35

Cita:

Iniciado por KoswiDigital

edito: Me acabo de dar cuenta que lo mencioné (lo del imagedestroy) en el post anterior al del script, y perdonad, pero ya relacioné directamente el uploadify con la subida de imágenes... Que es para lo que yo lo he utilizado en todas las ocasiones. La costumbre, que no siempre es buena ^^

Gracias igualmente Koswi, pero ya me he dado por vencido ninguno de los 120 scripts que he encontrado me funciona (en localhost funcionan bárbaro) pero al momento de subirlo no me funcionan, no se si será que el servidor a lo que es gratuito me deniegan los uploads o no se que (pero con el blog de mi web) los subo lo mas bien desde mi panel de control cada vez que realizo un nuevo post e incluyo imágenes

Ya no se que hacer

KoswiDigital · #22 (**permalink**) 25/08/2011, 05:34

Lo más probable es lo que te comentaba al principio, la línea max_file_uploads.
¿Te has puesto ya en contacto con el soporte de tu hosting? Creo recordar, que hace ya tiempo, cuando utilizaba un hosting gratuito, me pusiera en contacto con ellos para una modificación en el php.ini (no recuerdo ahora que era exactamente) y me lo cambiaron sin ningún problema. Este host era 000webhost.com.

Si en local funciona y en el servidor no, y sólo falla la subida de archivos, casi seguro es esa variable.

Un saludo.

alette666 · #23 (**permalink**) 25/08/2011, 09:19

Cita:

Iniciado por KoswiDigital

Este host era 000webhost.com.

Un saludo.

Si es ese mismo hosting, pero no se si sera eso del php.ini ya que tengo un blog en ese hosting y cada vez que subo un archivo superior a los 5Mb lo sube sin problemas desde wordpress, pero no me arrancan los scripts de uploads de forma publica

KoswiDigital · #24 (**permalink**) 25/08/2011, 12:05

Insisto en que se lo comentes a ellos, lo mejor es preguntar en el foro de soporte y que te quiten de dudas respecto a esas variables del php.ini. Si no es eso... Seguiremos intentando ayudarte.

Un saludo.

alette666 · #25 (**permalink**) 25/08/2011, 12:11

Cita:

Iniciado por KoswiDigital

Insisto en que se lo comentes a ellos, lo mejor es preguntar en el foro de soporte y que te quiten de dudas respecto a esas variables del php.ini. Si no es eso... Seguiremos intentando ayudarte.

Un saludo.

Ok gracias Koswi, ya evie el formulario de contactyo (en ingles), ayudado de San Google

ahora esperemos que me respondan rápido, ya que mis fanáticos quieren subir y compartir sus presentaciones en el blog, con toda la comunidad