blueImp/jquery file upload – ¿Cómo puedo obtener el mensaje de error si el tipo de archivo no fue aceptada?

Quiero usar el BlueImp/Jquery File Upload para poder subir imágenes a la web del servidor de web.
Tengo este código JS que he generado por la lectura de 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 subir cualquier archivo que no es una imagen, pero me gustaría ser capaz de obtener los mensajes de error (en caso de existir) para mostrar al usuario.

En su demo tienen algo de código (jquery.fileupload-ui.js y jquery.fileupload-fp.js) que crear «arte de magia» el código HTML con el error dentro (todavía estoy strugling a entender).

Yo realmente no se si debo usar estos complementos también y de alguna manera de personalizar el HTML que se genera o si es más sencillo para obtener la información de forma manual y la pueblan.

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

¿Cómo puedo configurar el HTML que se genera o ¿cómo puedo obtener el mensaje de error?

Gracias,
Oscar

InformationsquelleAutor JSBach | 2012-09-20

9 Kommentare

  1. 15

    Para ello se puede utilizar el archivo agregado de devolución de llamada para validar los archivos, de esta manera, el uso de «return false» para evitar la adición de 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 registrarse fileuploadadded de devolución de llamada 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 fileupload acceptFileTypes opciones de usar;
    e.originalEvent.de datos.fileupload.opciones.acceptFileTypes

    Usted puede encontrar más información aquí;

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

    • No iba a funcionar con mayúsculas anexos, es decir, el archivo «myphoto.JPG» no sería válido
  2. 34

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

    $('#fileupload').bind('fileuploadprocessfail', function (e, data) {
        alert(data.files[data.index].error);
    });
    • Gracias! Este data.files[index].error es exactamente lo que yo estaba tratando de averiguar (donde fue el mensaje de error se guarda).
    • «no» solo se puede activar si el servidor web devuelve un error de respuesta HTTP. Pero «hecho» se activa también si su carga de servidor de controlador de error devuelto a través de «error» de la propiedad.
  3. 12

    Como se ha mencionado por user2999209, la manera correcta de ir es con el fileuploadprocessfail de devolución de llamada.

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

    $('#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);
      });

    Tratando de subir un archivo con el tipo de archivo incorrecto hará que el mensaje de «AAA tipo de Archivo no permitido» para ser exhibidos.

    • esta es la mejor solución que aceptó contestar. Aquí se utilizan las reglas de validación de la biblioteca en lugar de crear su propio
    • Esta es una buena respuesta, ya que el plugin de documentación, no se habla de cómo obtener correctamente el mensaje de error y la pantalla de nuevo.
  4. 5

    Si usted está usando un servidor PHP, tengo una solución más simple. Si no, creo que esto puede ayudar a usted también.

    Usted no necesita utilizar acceptFileTypes param en el frontend. Inicialice el PHP UploadHandler clase 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 pase no deseados tipo de archivo o el tamaño del archivo, El ajax de retorno 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"}
    • Esta no es una manera eficaz para controlar esto, porque vas a tener que hacer innecesarios peticiones http a pesar de que podría manejar en el cliente.
    • ^^ no en IE8 o IE9, porque no soporta el api de archivo.
    • Exactamente. Ese es el inconveniente que debe tener cubierto.
  5. 5

    Utilizar el processfail de devolución de llamada

    $('#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);
        }
    });
  6. 2

    El orden de carga de los scripts es importante para obtener el mensaje de error que aparezca con la configuración predeterminada del proceso de validación,

    Este fin me funciona :

    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
    • Puedes dar algún ejemplo de trabajo, por favor, me puede no darse cuenta del defecto de un proceso de validación. Mi guión, el fin es el mismo. Por alguna razón proceso de eventos nunca se ha disparado…
  7. 1

    Sería mejor para validar el tipo de archivo (sería formato como «image/jpeg») de extensión. En este caso de evitar posibles problemas con las mayúsculas de las minúsculas y similares inesperados problemas

    $('#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;
                        }
                    });
  8. 0

    Si usted es nuevo a la comprensión de cómo javascript errorhandling funciona, lo mejor es leer sobre el tema: try/catch (MDN)

    Sin embargo, el error es en realidad un método dentro de la fileupload prototipo, así que, en teoría esta función se ejecutará cuando el error ocurre.

    Acaba de agregar {el código} a la 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 produce ningún error. El código siguiente es normalmente de cómo las capturas. (no hacerlo ya?)

    try {
    
      ...any code you want to exception handle with...
    
      }
      catch (e) {      
        alert(e);
      }
    • Esto no tiene nada que ver con el op pregunta.
    • de verdad? la captura de los errores no tiene nada que ver con la pregunta «¿cómo puedo obtener el mensaje de error»?
  9. 0

    Nada de lo que yo he encontrado en estos respondieron que funcionó para mí, y curiosamente, los desarrolladores que escribió el demos para que el plugin utiliza un estilo diferente de cuál es el descrito en la documentación. De todos modos, aparte de el punto.

    He copiado el código que utilizan para obtener la versión de IU a la obra, y que finalmente hice el truco para mí. Ellos usan .sobre el método y ‘processalways’ para comprobar los errores en lugar de utilizar un ‘error’ o ‘no’ método.

    origen de vista:http://blueimp.github.io/jQuery-File-Upload/basic-plus.html

    Aquí está el código fuente.

    Saludos

    • Incluso su ejemplo no funciona, puedo subir .jpg archivos de más de 999 KB. Cómo vergonzoso.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea