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.
<div class="upload">
<input type="file" name="fileUploadEle" id="fileUploadEle" class="btn-upload-button"/>
</div>
$(".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
Cita de: OssoH en 18 Marzo 2015, 19:31 PM
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.
$(".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.
<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.
<div class="upload">
<input type="file" name="fileUploadEle" id="fileUploadEle" class="btn-upload"/>
<input type="submit" Value="Subir Imagen" class="btn-upload-button">
</div>
$(".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
Tu codigo funciona perfectamente.
Muchas gracias.
Llevas razón, ahora que lo reflexiono. ;-) ;-) ;-)