Soy nuevo en esto de trabajar con tareas asíncronas y me estoy volviendo loco. Cuando termine lo que tengo entre manos me podre a estudiar más sobre esto, pero ahora ando justito de tiempo.
Mi pregunta es la siguiente: necesito validar un formulario desde el cliente (también lo voy a realizar desde el servidor, pero quiero doble seguridad). Lo que quiero validar es al subir un archivo, verificar que este sea una imagen. Hay muchos métodos por ahí que analiza la extensión o te devuelve el mime/type pero es incorrecto, ya que podéis intentarlo al cambiar la extensión a un mp3 y jpg y te dirá que el MIME es jpg.
Empecé viendo un ejemplo que leía 4 bits del archivo y después según sean esos 4 bytes puedes saber que tipo de archivo es. Lo que pasa que el código que empecé a realizar no se como implementarlo.
Lo que quiero que haga es lo siguiente: del formulario seleccionas una imagen, y cuando selecciones una, que lea sus 4 bytes iniciales, lo compare y si realmente esta entre los admitidos pues que se muestre una preview... si no es así que se muestre un mensaje de error diciendo archivo inválido.
Lo que necesito es que la función checkFileType me devuelva un valor a $('input[type=file]#imagencabecera').change(function()
y así después de la validación si es correcta que se muestre la preview en pantalla.
Este es el código que falta por retocar:
$('input[type=file]#imagencabecera').change(function(){
var file = (this.files[0].name).toString();
var type = (this.files[0].type).toString();
var reader = new FileReader();
console.log(type);
$('#file-info').text('');
$('#file-info').text(file);
reader.onload = function (e){
$('#filepreview img').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
function checkFileType(file){
if (window.FileReader && window.Blob)
// All the File APIs are supported. Si soporta HTML5 FileReader y Blob
{
var slice = file.slice(0,4); // Get the first 4 bytes of a file
var reader = new FileReader(); // Create instance of file reader. It is asynchronous!
reader.readAsArrayBuffer(slice); // Read the chunk file and return to blob
reader.onload = function(e) {
var buffer = reader.result; // The result ArrayBuffer
var view = new DataView(buffer); // Get access to the result bytes
var signature = view.getUint32(0, false).toString(16); // Read 4 bytes, big-endian,return hex string
switch(signature) // Every file has a unique signature, we can collect them and create a data lib
{
case "89504e47": file.verified_type = "image/png"; break;
case "47494638": file.verified_type = "image/gif"; break;
case "FFd8FFe0": file.verified_type = "image/jpeg"; break;
case "FFd8FFe1": file.verified_type = "image/jpeg"; break;
case "FFd8FFe2": file.verified_type = "image/jpeg"; break;
case "FFd8FFe3": file.verified_type = "image/jpeg"; break;
case "FFd8FFe8": file.verified_type = "image/jpeg"; break;
default: file.verified_type = 0;
}
}
}
else
// File and Blob are not supported
{
}
}
Muchas gracias por todo.
Lo que necesito es que la función checkFileType me devuelva un valor a $('input[ty...