Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problerma al tratar de hacer adjuntos al estilo gmail

Estas en el tema de Problerma al tratar de hacer adjuntos al estilo gmail en el foro de Frameworks JS en Foros del Web. Hola maestros primero que todo no se muy bien si mi problema es de ajax o de javascript, asique si no corresponde aca pido a ...
  #1 (permalink)  
Antiguo 29/12/2007, 13:44
Avatar de El_Metallick  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago, Chile
Mensajes: 1.718
Antigüedad: 21 años, 5 meses
Puntos: 16
Problerma al tratar de hacer adjuntos al estilo gmail

Hola maestros primero que todo no se muy bien si mi problema es de ajax o de javascript, asique si no corresponde aca pido a los moderadores que lo muevan y sorry .

Bueno vamos al grano, trato de hacer un sistema de adjuntos como el de gmail para las noticias en mi sitio, para ello hago lo siguiente:

dina.php
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dina</title>
<link href="../includes/style.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function addInputFile() {    
    var nInputs = document.getElementById('nInputs').value
    
    // Obtener la instancia del objeto XMLHttpRequest
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        ajax = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) { // Internet Explorer
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    ajax.open("GET", "includes/addInputFile.php?id="+nInputs,true);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4) {
            document.getElementById('inputFile').innerHTML = document.getElementById('inputFile').innerHTML + ajax.responseText
        }
    }
    
    ajax.send(null)
    
    document.getElementById('nInputs').value = ++nInputs;
}

function resultadoUpload(estado,file,nFile) {
    var link = '<a href="#">Eliminar</a> - <a href="#">Ver</a>';

    if (estado == 0) {
        var mensaje = file;
    }
    else if (estado == 1) {
        var mensaje = alert('Error! - El Archivo no llego al servdor' + link);
    }
    else if (estado == 2) {
        var mensaje = alert('Error! - Solo se permiten Archivos que no sean Imagenes' + link);
    }
    else if (estado == 3) {
        var mensaje = alert('Error! - No se pudo copiar Archivo. Posible problema de permisos en server' + link);
    }

    document.getElementById('formUpload'+nFiles).innerHTML=mensaje;
    }
</script>
</head>
<body>
  <form action="new_add.php" method="post" enctype="multipart/form-data">
    Titulo:<br />
    <input name="title" type="text" class="adminNewAddInput" /><br /><br />
    Adjuntos:<br />
    <div id="inputFile"></div>
    <input type="hidden" id="nInputs" name="nInputs" value="0" /><a href="#" onClick="addInputFile()">Adjuntar Archivo</a><br /><br />
    <p align="center"><input type="submit" name="submit" value="Agregar" /></p>
  </form>
</body>
</html>
new_add_attachment.php
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>new_add_attachment</title>
</head>
<body>
<?php
    $id = $_POST['id'];
    
    $type = substr($_FILES['fileUpload']['type'], 0, 5);

    $dir = '../files/news';

    if(isset($_FILES['fileUpload']['tmp_name'])) 
    {
        if(($type == 'application') || ($type == '')) 
        {
            if (!copy($_FILES['fileUpload']['tmp_name'], $dir.$_FILES['fileUpload']['name']))
            {
                echo '<script>parent.resultadoUpload (\'3\', \''.$_FILES['fileUpload']['name'].'\',\''.$id'.\');</script>';
            }
            else
            {
                echo '<script>parent.resultadoUpload (\'0\', \''.$_FILES['fileUpload']['name'].'\',\''.$id'.\');</script>';
            }
        }
        
        echo '<script>parent.resultadoUpload (\'2\', \''.$_FILES['fileUpload']['name'].'\',\''.$id'.\');</script>';
    }
    
    echo '<script>parent.resultadoUpload (\'1\', \''.$_FILES['fileUpload']['name'].'\',\''.$id'.\');</script>';
?>
</body>
</html>
addInputFile.php
Código:
<?php
    if(isset($_GET["id"]))
    {
        $id = $_GET["id"];
?>
<div id="formUpload<?= $id ?>">
  <form method="post" enctype="multipart/form-data" action="new_add_attachment.php" target="iframeUpload<?= $id ?>">
    <input type="hidden" name="id" value="<?= $id ?>" /><input name="file<?= $id ?>" type="file" id="file<?= $id ?>" size="50" class="adminNewAddFile" onChange="javascript: submit();" /><br />
    <iframe name="iframeUpload<?= $id ?>" style="display:none"></iframe>
  </form>
</div>    
<?php
    } 
?>
Funciona todo bien hasta que trato de subir el archivo osea hasta que se tiene que ejecutar el onChange del campo tipo file, es ahi cuando el firebug me dice:

submit is not a function
onchange(change )

Y no me sube el archivo.

Agradeceria cualquier tipo de ayuda. Saludos y gracias de antemano
__________________
Haz la guerra en la cama y el amor donde se te de la gana...
El tiempo es el mejor maestro, lo único malo es que te mata...¡¡Aprovecha tu tiempo!!
  #2 (permalink)  
Antiguo 29/12/2007, 16:52
Avatar de El_Metallick  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago, Chile
Mensajes: 1.718
Antigüedad: 21 años, 5 meses
Puntos: 16
Re: Problerma al tratar de hacer adjuntos al estilo gmail

Estimados el problema es que no me inserta un form dentro de otro no se porque, cuando probe solo la parte de los adjuntos eliminando todo el resto del formulario principal funciono de maravillas. Ahora el problema es que no se me ocurre como hacerlo para que funcione si es que no es como lo presente aqui (en verdad ese codigo es bastante famoso dentro de internet, para subir archivos con "ajax" aunque no es tan asi).

Estaba pensando en hacer una función sendFile (en javascript)

Código:
function sendFile(file,id) {
    // Obtener la instancia del objeto XMLHttpRequest
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        ajax = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) { // Internet Explorer
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    ajax.open('POST','new_add_attachment.php',true);
    
    var query = 'id=' + id + '&file=' + file.value;
    
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send(query);
}
pero no funciona.

Saludos
__________________
Haz la guerra en la cama y el amor donde se te de la gana...
El tiempo es el mejor maestro, lo único malo es que te mata...¡¡Aprovecha tu tiempo!!
  #3 (permalink)  
Antiguo 30/12/2007, 02:54
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Problerma al tratar de hacer adjuntos al estilo gmail

Hola:

En el primer mensaje, tu prroblema era que usabas una función que no pertenecía a ningún elemento, así que javascript, en esos casos considera que pertenece a window... y window.submit() no existe... funcionaría con onchange="this.form.submit()"...

Sobre el segundo, no veo que estés anidando forms... si así fuera, no sería posible (no está permitido), aunque sí que puedes insertar nuevos elementos... busca en la página de JavierB (¡Hola !) Codiguillos de JavierB, en el apartado de crear Elementos (también hay algo en las FAQs javascript)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 30/12/2007, 11:13
Avatar de El_Metallick  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago, Chile
Mensajes: 1.718
Antigüedad: 21 años, 5 meses
Puntos: 16
Re: Problerma al tratar de hacer adjuntos al estilo gmail

Primero que todo gracias por la respuesta estimado caricatos, pero creo que no me explique bien. En el primer post que hice trataba de anidar dos forms, esto porque originalmente mi form es el siguiente:

Código:
   <form action="new_add.php" method="post" enctype="multipart/form-data">
    Titulo:<br />
    <input name="title" type="text" class="adminNewAddInput" /><br /><br />
    Adjuntos:<br />
    <div id="inputFile"></div><input type="hidden" id="nInputs" name="nInputs" value="0" /><a href="#" onClick="addInputFile()">Adjuntar Archivo</a><br /><br />
    <p align="center"><input type="submit" name="submit" value="Agregar" /></p>
  </form>
y la función addInputFile()

Código:
function addInputFile() {    
    var nInputs = document.getElementById('nInputs').value
    
    // Obtener la instancia del objeto XMLHttpRequest
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        ajax = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) { // Internet Explorer
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    ajax.open("GET", "includes/addInputFile.php?id="+nInputs,true);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4) {
            document.getElementById('inputFile').innerHTML = document.getElementById('inputFile').innerHTML + ajax.responseText
        }
    }
    
    ajax.send(null)
    
    document.getElementById('nInputs').value = ++nInputs;
}
y finalmente addInputFile.php

Código:
<?php
    if(isset($_GET["id"]))
    {
        $id = $_GET["id"];
?>
<div id="formUpload<?= $id ?>">
  <form method="post" enctype="multipart/form-data" action="new_add_attachment.php" target="iframeUpload<?= $id ?>">
    <input type="hidden" name="id" value="<?= $id ?>" /><input name="file<?= $id ?>" type="file" id="file<?= $id ?>" size="50" class="adminNewAddFile" onChange="javascript: submit();" /><br />
    <iframe name="iframeUpload<?= $id ?>" style="display:none"></iframe>
  </form>
</div>    
<?php
    } 
?>
Luego al hacer click en agregar adjunto trataria de insertar el form del addInputFile.php en el form original algo asi:

Código:
   <form action="new_add.php" method="post" enctype="multipart/form-data">
    Titulo:<br />
    <input name="title" type="text" class="adminNewAddInput" /><br /><br />
    Adjuntos:<br />
    <div id="inputFile">
      <div id="formUpload<?= $id ?>">
        <form method="post" enctype="multipart/form-data" action="new_add_attachment.php" target="iframeUpload<?= $id ?>">
          <input type="hidden" name="id" value="<?= $id ?>" /><input name="file<?= $id ?>" type="file" id="file<?= $id ?>" size="50" class="adminNewAddFile" onChange="javascript: submit();" /><br />
          <iframe name="iframeUpload<?= $id ?>" style="display:none"></iframe>
        </form>
      </div>  
    </div>
    <input type="hidden" id="nInputs" name="nInputs" value="0" /><a href="#" onClick="addInputFile()">Adjuntar Archivo</a><br /><br />
    <p align="center"><input type="submit" name="submit" value="Agregar" /></p>
  </form>
Y ahi es donde se produce el problema de forms anidados.

Ahora en el segundo post se me habia ocurrido modificar un poco el codigo de addInputFile.php

Código:
<?php
    if(isset($_GET["id"]))
    {
        $id = $_GET["id"];
?>
<div id="formUpload<?= $id ?>">
    <input type="hidden" name="id" value="<?= $id ?>" /><input name="file<?= $id ?>" type="file" id="file<?= $id ?>" size="50" class="adminNewAddFile" onChange="javascript: sendFile(this,<?= $id ?>);" /><br />
    <iframe name="iframeUpload<?= $id ?>" style="display:none"></iframe>
</div>    
<?php
    } 
?>
y en vez de enviar el form que contenia al input file hacer una llamada ajax para que subiera el archivo por detras, es por esto que se me ocurrio el codigo del segundo post

Código:
function sendFile(file,id) {
    // Obtener la instancia del objeto XMLHttpRequest
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        ajax = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) { // Internet Explorer
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    ajax.open('POST','new_add_attachment.php',true);
    
    var query = 'id=' + id + '&file=' + file.value;
    
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send(query);
}

Pero el problema de esto es que a new_add_attachment.php llega el nombre del archivo pero con \\ en vez de \ (C:\\Carpeta\\archivo.jpg) y no se como solucionar eso pues trato de hacerle un str_replace con php pero cuando hago str_replace("\\","\", $file) me tira conflictos con \" asique ya no se como hacerlo.

Pero bueno seguire probando aver si me funciona. En todo caso la forma de agregar inputs que sale en la pagina de javierB es mejor. adoptare esa forma.

Saludos
__________________
Haz la guerra en la cama y el amor donde se te de la gana...
El tiempo es el mejor maestro, lo único malo es que te mata...¡¡Aprovecha tu tiempo!!
  #5 (permalink)  
Antiguo 30/12/2007, 13:05
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Problerma al tratar de hacer adjuntos al estilo gmail

Hola:

No me había dado cuenta de el anidamiento, y debes evitarlo...

Las posibilidades que se me ocurren, es que cada vez que envíes un archivo (creo que lo haces en un iframe) desabilitar el último campo, o sea ponerlo disabled... o subir todos los ficheros a la vez... o sea con un solo submit... y considera lo que puse antes: submit() a secas no hace nada, debes indicar el formulario.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 30/12/2007, 13:10
Avatar de El_Metallick  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago, Chile
Mensajes: 1.718
Antigüedad: 21 años, 5 meses
Puntos: 16
Re: Problerma al tratar de hacer adjuntos al estilo gmail

Por lo que veo voy a tener que hacerlo asi, subir todos los archivos juntos, aunque la idea era que los archivos se subieran mientras se escribia el contenido (como en gmail) pero bueno si no resulta nada tendré que hacerlo como dices. Bueno muchas gracias por la ayuda y saludos

PD: felices fiestas
__________________
Haz la guerra en la cama y el amor donde se te de la gana...
El tiempo es el mejor maestro, lo único malo es que te mata...¡¡Aprovecha tu tiempo!!
  #7 (permalink)  
Antiguo 30/12/2007, 15:07
Avatar de El_Metallick  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago, Chile
Mensajes: 1.718
Antigüedad: 21 años, 5 meses
Puntos: 16
Re: Problerma al tratar de hacer adjuntos al estilo gmail

Al final lo logre, lo que hice fue separar en 2 formularios uno que es para todos los datos que desee y el otro con los datos de los archivos a subir, básicamente la idea y el funcionamiento es el mismo pero cada vez que se agrega un archivo se agrega en el form principal un input hidden que contiene la info del archivo que se subió. No es de lo mas elegante la solción pero al menos funciona.

Saludos y gracias nuevamente por la ayuda
__________________
Haz la guerra en la cama y el amor donde se te de la gana...
El tiempo es el mejor maestro, lo único malo es que te mata...¡¡Aprovecha tu tiempo!!
  #8 (permalink)  
Antiguo 01/01/2008, 02:57
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Problerma al tratar de hacer adjuntos al estilo gmail

Hola:

No parece mala idea, y si te funciona (siempre es lo más importante)... otra alternativa sería ir actualizando una variable de sesión en php... aunque no sabría ayudarte mucho en ello, porque las uso en pocas ocasiones (códigos captcha... y poquito más)...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 02/01/2008, 15:03
Avatar de El_Metallick  
Fecha de Ingreso: noviembre-2002
Ubicación: Santiago, Chile
Mensajes: 1.718
Antigüedad: 21 años, 5 meses
Puntos: 16
Re: Problerma al tratar de hacer adjuntos al estilo gmail

mmm no se me habia ocurrido no es mala idea, pero por ahora me quedo con la solución que implementé (en verdad no quiero ver más el código de aquella página por lo menos por un tiempo :P)

Saludos y gracias por la ayuda
__________________
Haz la guerra en la cama y el amor donde se te de la gana...
El tiempo es el mejor maestro, lo único malo es que te mata...¡¡Aprovecha tu tiempo!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 05:45.