subir una imagen usando ajax sin refrescar la pagina

[OssoH]

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 [Seleccionar] Expandir


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


Código [Seleccionar] Expandir


$(".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

[Slikp]

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 (javascript) [Seleccionar] Expandir


$(".btn-upload-button").click(function(event){


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

Código (html4strict) [Seleccionar] Expandir


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


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

Código (html4strict) [Seleccionar] Expandir


<div class="upload">
        <input type="file" name="fileUploadEle" id="fileUploadEle"  class="btn-upload"/>

<input type="submit" Value="Subir Imagen" class="btn-upload-button">
</div>


Código (javascript) [Seleccionar] Expandir


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

$(".btn-upload-button").click(function(event){
jQuery.ajax({
url: '/phpUploadImage.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert('ok'+data);
    }
});
});



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

[OssoH]

Tu codigo funciona perfectamente.
Muchas gracias.

Llevas razón, ahora que lo reflexiono.