fileupload - Carga del archivo blueImp/jquery-¿Cómo obtengo el mensaje de error si el tipo de archivo no fue aceptado?

jquery fileupload beforesend

Question

Quiero usar la carga de archivos de BlueImp / Jquery para poder cargar algunas imágenes en el servidor web. Tengo este código JS que generé al leer muchas fuentes

 $(''#file_upload'').fileupload(''option'', {
        dataType: ''json'',
        url: ''/Upload/UploadFiles'',
        maxFileSize: 5000000,
        acceptFileTypes: /(/.|//)(gif|jpe?g|png)$/i,
        process: [
            {
                action: ''load'',
                fileTypes: /^image//(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: ''resize'',
                maxWidth: 1440,
                maxHeight: 900
            },
            {
                action: ''save''
            }
        ],
        progressall: function (e, data) {
            $(this).find(''.progressbar'').progressbar({ value: parseInt(data.loaded / data.total * 100, 10) });
        },
        done: function (e, data) {
            $(''#show_image'').append(''<img src="'' + data.result[0].ThumbURL + ''" />'');
            $(''#imgID'').val($(''#imgID'').val() + data.result[0].Id + '','');
            $(this).find(''.progressbar'').progressbar({ value: 100 });
        },
        error: function (e, data) {
            var a = 1;
        }
    });
});

Funciona porque no carga ningún archivo que no sea una imagen, pero me gustaría poder recibir los mensajes de error (en caso de que existan) para mostrarlos al usuario.

En su demo tienen algunos códigos (jquery.fileupload-ui.js y jquery.fileupload-fp.js) que crean "mágicamente" el HTML con el error en su interior (todavía estoy luchando por entenderlo).

Realmente no entiendo si debería usar estos complementos también y de alguna manera personalizar el HTML que se genera o si es más simple obtener la información manualmente y rellenarla.

Soy bastante nuevo para JS y Jquery, así que tal vez me esté perdiendo algo.

¿Cómo configuro el HTML que se genera o cómo recibo el mensaje de error?

Gracias oscar

Answer 1

Como lo mencionó user2999209, la forma correcta de hacerlo es con la devolución de llamada fileuploadprocessfail .

Para completar su respuesta, si desea traducir el mensaje de error, debe pasar la siguiente opción (no documentada):

$(''#my-uploader'').fileupload({
    // ... some options ...
    messages : {
      maxNumberOfFiles: ''AAA Maximum number of files exceeded'',
      acceptFileTypes: ''AAA File type not allowed'',
      maxFileSize: ''AAA File is too large'',
      minFileSize: ''AAA File is too small''
      uploadedBytes : ''AAA Uploaded bytes exceed file size''
    },
    // ... some other options ...
  })
  .on("fileuploadprocessfail", function(e, data) {
    var file = data.files[data.index];
    alert(file.error);
  });

Si intenta cargar un archivo con el tipo de archivo incorrecto, aparecerá el mensaje "No se permite el tipo de archivo AAA".

Answer 2

Nada de lo que he encontrado en estas respuestas funcionó para mí, y, sorprendentemente, los desarrolladores que escribieron las demostraciones para ese complemento utilizan un estilo diferente al descrito en la documentación. De todos modos, eso aparte del punto.

Copié el código que usan para hacer que la versión de interfaz de usuario funcione, y eso finalmente me sirvió. Utilizan el método .on y el ''proceso siempre'' para verificar errores en lugar de usar un método ''error'' o ''fallar''.

ver-fuente: http://blueimp.github.io/jQuery-File-Upload/basic-plus.html

Aquí está el código fuente.

Aclamaciones

Answer 3

Para esto, puede usar la devolución de llamada de archivo agregado para validar archivos, como esto, use "return false" para evitar agregar ese archivo;

 $(''#yourfileuploader'').fileupload({
                    add: function (e, data) {
                        var fileType = data.files[0].name.split(''.'').pop(), allowdtypes = ''jpeg,jpg,png,gif'';
                        if (allowdtypes.indexOf(fileType) < 0) {
                            alert(''Invalid file type, aborted'');
                            return false;
                        }

                    }
                });

o puede registrar una devolución de llamada de archivo cargada como esta,

$(''#yourfileuploader'').fileupload().bind(''fileuploadadded'', function (e, data) {
                    var fileType = data.files[0].name.split(''.'').pop(), allowdtypes = ''jpeg,jpg,png,gif'';
                    if (allowdtypes.indexOf(fileType) < 0) {
                        alert(''Invalid file type, aborted'');
                        return false;
                    }
                });

también puede acceder a las opciones de fileupload acceptFileTypes usando; e.originalEvent.data.fileupload.options.acceptFileTypes

Puedes encontrar más información aquí;

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

Answer 4

Sé que este es un hilo viejo, pero si alguien sigue buscando cómo obtener el mensaje de error, aquí hay una manera de hacerlo:

$(''#fileupload'').bind(''fileuploadprocessfail'', function (e, data) {
    alert(data.files[data.index].error);
});

Answer 5

Sería mejor validar el tipo de archivo (sería un formato como "imagen / jpeg") que la extensión. En este caso, usted evita posibles problemas con problemas inesperados similares a mayúsculas y minúsculas.

$(''#yourfileuploader'').fileupload().bind(''fileuploadadded'', function (e, data) {
                    var fileType = data.files[0].type;
                    if (type.indexOf(''image'') < 0) {
                        alert(''Invalid file type, aborted'');
                        return false;
                    }
                });

Answer 6

Si está utilizando un servidor PHP, tengo una solución más simple. Si no lo eres, creo que esto también podría ayudarte.

No es necesario utilizar el parámetro acceptFileTypes en la interfaz. Simplemente inicialice la clase PHP UploadHandler con estos parámetros:

array(
    ''accept_file_types'' => ''//.(gif|jpe?g|png)$/i'',
    ''upload_url'' => ''uploads/'', // both of upload_url, upload_dir equals to the upload destination
    ''upload_dir'' => ''uploads/'',
    ''max_file_size'' => 1024*1024*2 // in byte
)

Cuando se pasa un tipo de archivo o tamaño de archivo no deseado, el retorno ajax será algo así como

{name: "Dream Come True.mp3", size: 14949044, type: "audio/mp3", error: "File type not allowed"} 

o

{name: "feng (3).jpg", size: 634031, type: "image/jpeg", error: "File is too big"}

Answer 7

Si no sabes cómo funciona el manejo de errores de javascript, es mejor leer sobre el tema: probar / atrapar (MDN)

Sin embargo, el error es en realidad un método dentro del prototipo fileupload, por lo que teóricamente esta función se ejecutará cuando ocurra el error.

Simplemente agregue {su código} al errorHandler en el método.

...
error: function (e, data) {
        var a = 1; // <--in your example, this does nothing.
        alert(e); // <--or whatever you wish to do with the error
        return a; // <--did you want to return true?
    }
...

Si esta alerta nunca sucede, entonces no se genera ningún error. El siguiente código es normalmente cómo los atrapas. (no hace esto ya?)

try {

  ...any code you want to exception handle with...

  }
  catch (e) {      
    alert(e);
  }

Answer 8

Utilice la devolución de llamada processfail

$(''#fileupload'').fileupload({
    maxFileSize: 5000000,
    done: function (e, data) {
        $.each(data.result.logo, function (index, file) {
            $(''<p/>'').text(file.name).appendTo(''#fileupload-files'');
        });
    },
    processfail: function (e, data) {
        alert(data.files[data.index].name + "/n" + data.files[data.index].error);
    }
});

Answer 9

El orden en que se cargan los scripts es importante para que aparezca el mensaje de error con el proceso de validación predeterminado.

Esta orden funciona para mí:

1. tmpl.min.js
2. jquery.ui.widget.js
3. jquery.iframe-transport.js
4. jquery.fileupload.js
5. jquery.fileupload-ui.js
6. jquery.fileupload-process.js
7. jquery.fileupload-validate.js