Загрузка файла blueImp/jquery - Как получить сообщение об ошибке, если тип файла не был принят?

Question

Я хочу использовать выгрузку файлов BlueImp/Jquery, чтобы иметь возможность загружать некоторые изображения на веб-сервер. У меня есть этот код JS, который я сгенерировал, прочитав много источников

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

Это работает, потому что он не загружает ни один файл, который не является изображением, но я хотел бы иметь возможность получать сообщения об ошибках (если они существуют) для отображения пользователю.

В своей демонстрации у них есть некоторый код (jquery.fileupload-ui.js и jquery.fileupload-fp.js), который "волшебным образом" создает HTML-код с ошибкой внутри (я все еще пытаюсь это понять).

Я не совсем понимаю, стоит ли мне использовать эти плагины и каким-то образом настраивать генерируемый HTML-код или проще получить информацию вручную и заполнить ее.

Я довольно новичок в JS и Jquery, так что, может быть, я что-то упустил.

Как настроить генерируемый HTML или как получить сообщение об ошибке?

Спасибо оскар

Answer 1

Для этого вы можете использовать обратный вызов с добавленным файлом для проверки файлов, например, использовать "return false", чтобы избежать добавления этого файла;

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

                    }
                });

или вы можете зарегистрировать обратный вызов fileuploadadded следующим образом:

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

также вы можете получить доступ к опциям fileupload acceptFileTypes, используя; e.originalEvent.data.fileupload.options.acceptFileTypes

Вы можете найти больше информации здесь;

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

Answer 2

Я знаю, что это старый поток, но если кто-то все еще ищет, как получить сообщение об ошибке, вот способ сделать это:

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

Answer 3

Как упомянуто пользователем 2999209, правильный путь - это fileuploadprocessfail Перезвоните.

Чтобы завершить его ответ, если вы хотите перевести сообщение об ошибке, вы должны передать следующую (недокументированную) опцию:

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

Попытка загрузить файл с неправильным типом файла приведет к отображению сообщения "Тип файла AAA не разрешен".

Answer 4

Если вы используете сервер PHP, у меня есть более простое решение. Если нет, то я верю, что это может помочь и вам.

Вам не нужно использовать параметр acceptFileTypes во внешнем интерфейсе. Просто инициализируйте класс PHP UploadHandler с этими параметрами:

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
)

Когда вы передаете нежелательный тип файла или размер файла, возврат Ajax будет что-то вроде

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

или же

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

Answer 5

Использовать 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 6

Порядок загрузки сценариев важен для отображения сообщения об ошибке в процессе проверки по умолчанию,

Этот заказ работает для меня:

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

Answer 7

Было бы лучше проверить тип файла (это был бы формат как "image/jpeg"), чем расширение. В этом случае вы избежите потенциальной проблемы с учетом регистра и аналогичных неожиданных проблем.

$('#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 8

Ничто из того, что я нашел в этих ответах, не сработало для меня, и, как ни странно, разработчики, написавшие демонстрации для этого плагина, используют стиль, отличный от того, что описан в документации. Во всяком случае, это в стороне от сути.

Я скопировал код, который они используют, чтобы заставить работать версию UI, и это наконец помогло мне. Они используют метод.on и "processalways" для проверки ошибок вместо использования метода "error" или "fail".

источник представления: http://blueimp.github.io/jQuery-File-Upload/basic-plus.html

Вот исходный код

ура

Answer 9

Если вы новичок в понимании того, как работает обработка ошибок javascript, лучше прочитать тему: try / catch (MDN)

Тем не менее, ошибка на самом деле является методом в прототипе загрузки файла, поэтому теоретически эта функция будет выполняться при возникновении ошибки.

Просто добавьте {ваш код} к errorHandler в методе.

...
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?
    }
...

Если это предупреждение никогда не происходит, то ошибка не возникает. Следующий код обычно показывает, как вы их ловите. (это не делает это уже?)

try {

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

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