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

Problemas con Ajaxupload

Estas en el tema de Problemas con Ajaxupload en el foro de Frameworks JS en Foros del Web. Buenaas tardes amigos, tiempo sin consultar por aqui. En estos momentos tengo una duda, que debido a lo extraña no estaba del todo seguro de ...
  #1 (permalink)  
Antiguo 12/11/2012, 12:47
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 389
Antigüedad: 9 años, 7 meses
Puntos: 16
Problemas con Ajaxupload

Buenaas tardes amigos, tiempo sin consultar por aqui.
En estos momentos tengo una duda, que debido a lo extraña no estaba del todo seguro de en donde postearla. sin embargo decidi hacerlo aqui.

La cosa es la siguiente: Estoy intentando implementar el plugin "ajaxupload" en un sistema que estoy haciendo, quienes lo hayan usado sabran que este esta realizado en jquery, y pues, la cuestion es que tenia el problema de que no me funcionaba, y le consegui la solución pero no entiendo cual es la razon y me gustaria saber si a alguien le ha pasado.


el codigo es el siguiente:
Código Javascript:
Ver original
  1. new AjaxUpload(button, {
  2.            
  3.             action: 'form2Producto.php',
  4.             name: 'myfile',
  5.             onSubmit : function(file, ext){
  6.                 // change button text, when user selects file          
  7.                 button.text('Uploading');
  8.                                
  9.                 // If you want to allow uploading only 1 file at time,
  10.                 // you can disable upload button
  11.                 this.disable();
  12.                
  13.                 // Uploding -> Uploading. -> Uploading...
  14.                 interval = window.setInterval(function(){
  15.                     var text = button.text();
  16.                     if (text.length < 13){
  17.                         button.text(text + '.');                   
  18.                     } else {
  19.                         button.text('Uploading');              
  20.                     }
  21.                 }, 200);
  22.             },
  23.             onComplete: function(file, response){
  24.                 button.text('Upload');
  25.                            
  26.                 window.clearInterval(interval);
  27.                            
  28.                 // enable upload button
  29.                 this.enable();
  30.                
  31.                 // add file to the list
  32.                 $('<li></li>').appendTo('#example1 .files').text(file);                    
  33.             }
  34.         });
donde button es el botton,div o etiqueta al que uno le hace click, ajaxupload se encarga de convertirlo en un file-input y realiza su trabajo, sumamente sencillo y util, la cuestion es que a mi no me estaba funcionando, despues de verificar casi dos dias decidi ponerme a probar cada cosa que tengo en el proyecto, quitando los demas archivos js,css etc. a ver xq no me funcionaba. Hasta que llegue a mi archivo css en el que tengo este comando:
Código CSS:
Ver original
  1. width:1024px;
Si lo comento. TODO funciona. si lo descomento deba de funcionarme el plug. Alguien tendra una idea de como o porque sucede esto y en caso de, como se soluciona?


jajajaja, es una locura, espero me entiendan. muchas gracias
__________________
Lo imposible es lo posible visto por los ojos de un incapaz.
Si te sirve la respuesta. dale + al karma.
Saludos
  #2 (permalink)  
Antiguo 12/11/2012, 13:20
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 13 años, 3 meses
Puntos: 1567
Respuesta: Problemas con Ajaxupload

Sin ver el conjunto es dificil ver la relación, en principio no la encuentro, además no vemos tu html. Ese width: 1024px; a que elemento se lo estabas aplicando?

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 16/11/2012, 14:20
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 389
Antigüedad: 9 años, 7 meses
Puntos: 16
Respuesta: Problemas con Ajaxupload

OK. perdon por la tardanza. jejeje. tienes razon emprear. te muestro:
El tag al qque le aplico el estilo es al body. esta de la siguiente manera:
Código CSS:
Ver original
  1. html{
  2.     background: url(../imagenes/fondo.png) no-repeat center top #f5f5f5;
  3.     font-size:12px;
  4.     font-family:Verdana,Helvetica, sans-serif;
  5.     color:#404040;
  6.    
  7. }
  8. #cuerpo{
  9.     margin-top:5px;
  10.     position:relative;
  11.     min-height: 500px;
  12.     width: 1024px;
  13.     background:#fff;
  14. }
  15. body{
  16.    
  17.     margin: 30px auto;
  18.     background:#fff;
  19.     #width:1024px;
  20.     margin:auto;
  21. }
Ahora se encuentra comentado para que me funcione el ajaxupload. la razon por la que se la puse es poruna imagen que coloco en el HTML para que quede de fondo.
El HTML si esta un poco complejo porque es php. sin embargo te lo coloco:

Código PHP:
Ver original
  1. include('../base.php');
  2.     include('../panelI.php');
  3.     $idproducto=$producto->insertarProd($_REQUEST);
  4.     echo $producto->formularioImagen($idproducto);
  5.     echo "<div id=\"panelAdmin\">";
  6.     $datosProd=$producto->datosProducto($idproducto);
  7.    
  8.     echo"<div class=\"botonCarga\" id=\"upload\">Subir Foto</div>
  9.            
  10.        <ul id=\"gallery\">
  11.                 <!-- Cargar Fotos -->
  12.        </ul>
  13.    </div>";
  14.    
  15.    
  16.     include(dirRoot."cierre.php");

Aqui esta linea "echo $producto->formularioImagen($idproducto);" me llama la funcion colocada al principio. sin embargo vuelvo a colocarla:
Código PHP:
Ver original
  1. $texto= "
  2.     <SCRIPT>
  3.         $(document).ready(function(){
  4.                 var button = $('#upload'), interval;
  5.                 new AjaxUpload(button, {
  6.                
  7.                 action: 'form2Producto.php',
  8.                 name: 'image',
  9.                 onSubmit : function(file, ext){
  10.                 // Validar Formato de la imagen
  11.                 if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
  12.                     button.text('Cargando');
  13.                     this.disable();
  14.                     this.setData({
  15.                         'idproducto': '$idproducto'
  16.                     });
  17.                     interval = window.setInterval(function(){
  18.                         var text = button.text();
  19.                         if (text.length < 13){
  20.                             button.text(text + '.');                   
  21.                         } else {
  22.                             button.text('Cargando Imagen');
  23.                         }
  24.                     }, 200);
  25.                    
  26.                 }else{
  27.                     //En caso de no tener un formato valido
  28.                     alert(\"no es una imagen\")
  29.                     return false;
  30.                 }
  31.                 },
  32.                 onComplete: function(file, response){
  33.                     button.text('Cargar Otra');
  34.                                
  35.                     window.clearInterval(interval);
  36.                                
  37.                     // enable upload button
  38.                     this.enable();
  39.  
  40.                     if($('#gallery li').length == 0){
  41.                         $('#gallery').html(response).fadeIn(\"fast\");
  42.                         $('#gallery li').eq(0).hide().show(\"slow\");
  43.                     }else{
  44.                         $('#gallery').prepend(response);
  45.                         $('#gallery li').eq(0).hide().show(\"slow\");
  46.                     }              
  47.  
  48.                      $(\"#gallery\").load(\"form2Producto.php?carga=listFotos&idprod=$idproducto\");
  49.                      //$('<li></li>').appendTo('#gallery').text(file);     
  50.                 }//final onComplete
  51.             });
  52.         });
  53.     </SCRIPT>
  54.     ";

Esta colocado asi ahora, porque estoy trabajando con algunas clases, sin embargo haciendolo estructurado directamente con el javascript presentaba el mismo problema, por tanto no tiene nada que ver con que tenga la funcion javascript impresa desde php. Precisamente por eso es mi duda. PORQUE no le consigo ni pies ni cabeza a como un valor CSS puede evitar que funcione esto. De repente quien lo haya usado antes tendra idea. MUCHAS GRACIAS.
__________________
Lo imposible es lo posible visto por los ojos de un incapaz.
Si te sirve la respuesta. dale + al karma.
Saludos

Etiquetas: ajax, ajax-jquery
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:20.