HTML5 + байты карточной игры JAVASCRIPT validación de formulario asíncrona leyendo los cuatro del archivo

Довод "против" Soy nuevo en esto de trabajar tareas asíncronas y я estoy volviendo локомотив. Cuando конечные остановки пещера lo que tengo manos меня podre estudiar más отрезвляют esto, pero ahora ando justito de tiempo.

Mi pregunta es la siguiente: necesito validar un formulario desde el cliente (también lo voy realizar desde el servidor, pero quiero doble seguridad). Lo que quiero validar es al subir un archivo, море verificar que este 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 un mp3 y jpg y te dirá que el MIME es jpg.

Empecé viendo un ejemplo que leía 4 бита del archivo y después según sean esos 4 байта puedes сабля que tipo de archivo es. Lo que pasa que el código que empecé realizar никакой se Комо implementarlo.

Lo que quiero que haga es lo siguiente: del formulario seleccionas una imagen, y cuando selecciones una, que lea sus 4 байта iniciales, lo сравнивают y СИ realmente esta пещера los admitidos pues que se muestre una preview... СИ никакой es así que se muestre un mensaje de error diciendo archivo inválido.

Lo que necesito es que la función checkFileType я devuelva доблесть ООН 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.

6
задан 07.03.2017, 18:41
0 ответов