elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  subir una imagen usando ajax sin refrescar la pagina
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: subir una imagen usando ajax sin refrescar la pagina  (Leído 2,137 veces)
OssoH


Desconectado Desconectado

Mensajes: 861


Ver Perfil
subir una imagen usando ajax sin refrescar la pagina
« en: 18 Marzo 2015, 19:31 pm »

Hola
Estoy haciendo una web para móvil con jquery mobile.
tengo un boton que al pulsarlo me aparece la tipica ventana de windows para seleccionar una imagen y subirlo a un servidor. Uso ajax para evitar el refresco de la página.

mi codigo es el siguiente.

Código:
   <div class="upload">
        <input type="file" name="fileUploadEle" id="fileUploadEle"  class="btn-upload-button"/>
    </div>

Código:
$(".btn-upload-button").click(function(event){
var data = new FormData();
jQuery.each(jQuery('#fileUploadEle')[0].files, function(i, file) {
    data.append('fileUploadEle-'+i, file);
});

jQuery.ajax({
url: '/phpUploadImage.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert('ok'+data);
    }
});

});

Al ejecutarlo y pulsar el boton se me abre la ventana de navegación y al mismo tiempo aparece el alert que tengo en el success de ajax.  Esto no deberia ejecutarse hasta que que no hubiera seleccionado la imagen.
¿que puede estar pasando?
Gracias


« Última modificación: 18 Marzo 2015, 19:39 pm por OssoH » En línea

Slikp

Desconectado Desconectado

Mensajes: 67


Ver Perfil
Re: subir una imagen usando ajax sin refrescar la pagina
« Respuesta #1 en: 19 Marzo 2015, 01:00 am »

Al ejecutarlo y pulsar el boton se me abre la ventana de navegación y al mismo tiempo aparece el alert que tengo en el success de ajax.  Esto no deberia ejecutarse hasta que que no hubiera seleccionado la imagen.

- Pues si observas tu codigo esta funcionando perfectamente como lo has descrito porque asi mismo lo has programado y repito, dices que no deberia ejecutarse hasta que no hubiera seleccionado la imagen, pero en tu Jquery tienes.

Código
  1. $(".btn-upload-button").click(function(event){
  2.  

- Y obviamanete todo lo que este dentro de esa primera funcion se va a disparar al darle un misero click a.

Código
  1. <div class="upload">
  2.        <input type="file" name="fileUploadEle" id="fileUploadEle"  class="btn-upload-button"/>
  3. </div>
  4.  

- Porque asi lo has escrito, porque no haces algo mas sencillo como esto.

Código
  1. <div class="upload">
  2.        <input type="file" name="fileUploadEle" id="fileUploadEle"  class="btn-upload"/>
  3.  
  4. <input type="submit" Value="Subir Imagen" class="btn-upload-button">
  5. </div>
  6.  

Código
  1. $(".btn-upload").click(function(event){
  2. var data = new FormData();
  3.    jQuery.each(jQuery('#fileUploadEle')[0].files, function(i, file) {
  4.    data.append('fileUploadEle-'+i, file);
  5.   });
  6. });
  7.  
  8. $(".btn-upload-button").click(function(event){
  9. jQuery.ajax({
  10. url: '/phpUploadImage.php',
  11.    data: data,
  12.    cache: false,
  13.    contentType: false,
  14.    processData: false,
  15.    type: 'POST',
  16.    success: function(data){
  17.        alert('ok'+data);
  18.    }
  19. });
  20. });
  21.  
  22.  

- Ojo no soy muy bueno en javascript pero creo que asi deberia funcionar... Saludos


« Última modificación: 19 Marzo 2015, 01:04 am por Slikp » En línea

OssoH


Desconectado Desconectado

Mensajes: 861


Ver Perfil
Re: subir una imagen usando ajax sin refrescar la pagina
« Respuesta #2 en: 21 Marzo 2015, 17:03 pm »

Tu codigo funciona perfectamente.
Muchas gracias.

Llevas razón, ahora que lo reflexiono.  ;-) ;-) ;-)
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como refrescar los datos de un textarea sin refrescar toda la pagina.
Desarrollo Web
70N1 3 3,389 Último mensaje 1 Mayo 2012, 08:02 am
por Graphixx
Recargar colunna de una Tabla sin refrescar la pagina web.
Desarrollo Web
lluvplay 3 4,382 Último mensaje 25 Junio 2012, 15:03 pm
por lluvplay
Subir Imagen usando CodeIgniter!
Desarrollo Web
01munrra 0 6,717 Último mensaje 26 Junio 2012, 05:44 am
por 01munrra
Godaddy tumba pagina usando mucho ajax
Desarrollo Web
kakashi20 3 1,417 Último mensaje 24 Octubre 2014, 17:47 pm
por ovalencia
Subir una pagina a internet usando filezila
Desarrollo Web
elvehe 1 935 Último mensaje 16 Marzo 2015, 15:38 pm
por MinusFour
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines