Estoy intentando subir imágenes al servidor.
Necesito un método que me permita bloquear el envío de una misma petición Ajax cuando aún no hemos recibido la respuesta de una petición anterior.
He intentado implementar la función data() con $('#imagen1')removedata(); para eliminar todos los datos asociados al nodo en cuestión, pero no lo implemento correctamente. Llevó con esto 2 días y estoy por utilizar otro método para subir imágenes.
El código es el siguiente:
$(document).ready(function(){
$(".messages").hide();
//queremos que esta variable sea global
var fileExtension = "";
var fileSize = "";
//función que observa los cambios del campo file y obtiene información
$('#imagen1:file').change(function()
{
//obtenemos un array con los datos del archivo
var file = $("#imagen1")[0].files[0];
//obtenemos el nombre del archivo
var fileName = file.name;
//obtenemos la extensión del archivo
fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
//obtenemos el tamaño del archivo
fileSize = file.size;
//obtenemos el tipo de archivo image/png ejemplo
var fileType = file.type;
//mensaje con la información del archivo
showMessage("<span class='info'>Archivo para subir: "+fileName+", peso total: "+
fileSize+" bytes.</span>");
});
//al enviar el formulario
$('#send_foto:button').click(function(){
//información del formulario
var formData = new FormData($(".contact-form-imagen1")[0]);
var message = "";
//hacemos la petición ajax
$.ajax({
url: '../../includes/upload-imagen1.php',
type: 'POST',
// Form data
//datos del formulario
data: formData,
//necesario para subir archivos via ajax
cache: false,
contentType: false,
processData: false,
//mientras enviamos el archivo
beforeSend: function(){
message = $("<span class='before'>Subiendo la imagen, por favor
espere...</span>");
showMessage(message);
},
//una vez finalizado correctamente
success: function(data){
if(isImage(fileExtension))
{
if (fileSize <=500000)
{
message = $("<span class='success'>La imagen ha subido
correctamente.</span>");
showMessage(message);
$(".showImage").html("<img src='../../images/imgpresupuestos/"+data+
"' />");
-1-
C:\xampp\htdocs\presupuestos\js\funcion_cargar_imagen1.js viernes, 10 de enero de 2014 19:47
}else
{
message = $("<span class='success'>La imagen superá el tamaño
máximo de 500000 Bytes.</span>");
showMessage(message);
}
}
else {
message = $("<span class='success'>Tan solo se admiten imágenes de
formato JPG, GIF, PNG.</span>");
showMessage(message);
}
},
//si ha ocurrido un error
error: function(){
message = $("<span class='error'>Ha ocurrido un error.</span>");
showMessage(message);
}
});
});
})
//como la utilizamos demasiadas veces, creamos una función para
//evitar repetición de código
function showMessage(message){
$(".messages").html("").show();
$(".messages").html(message);
}
//comprobamos si el archivo a subir es una imagen
//para visualizarla una vez haya subido
function isImage(extension)
{
switch(extension.toLowerCase())
{
case 'jpg': case 'gif': case 'png': case 'jpeg':
return true;
break;
default:
return false;
break;
}
}
Gracias de antemano.
Manuel.
