Загрузка файла blueImp/jquery - Как получить сообщение об ошибке, если тип файла не был принят?
Я хочу использовать загрузку файлов 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 или как получить сообщение об ошибке?
Спасибо,
Оскар
Ответы
Ответ 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;
}
}
});
или вы можете зарегистрировать обратный вызов с добавлением файлов, подобный этому,
$('#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;
}
});
также вы можете получить доступ к параметрам acceptFileTypesupupload, используя; e.originalEvent.data.fileupload.options.acceptFileTypes
Здесь вы можете найти дополнительную информацию;
https://github.com/blueimp/jQuery-File-Upload/wiki/Options
Ответ 2
Я знаю, что это старый поток, но если кто-то еще ищет, как получить сообщение об ошибке, вот как это сделать:
$('#fileupload').bind('fileuploadprocessfail', function (e, data) {
alert(data.files[data.index].error);
});
Ответ 3
Используйте обратный вызов 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);
}
});
Ответ 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"}
Ответ 5
Как уже упоминалось пользователем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 не разрешен".
Ответ 6
При загрузке скриптов важно, чтобы получить сообщение об ошибке с процессом проверки по умолчанию,
Этот порядок работает для меня:
- tmpl.min.js
- jquery.ui.widget.js
- jquery.iframe-transport.js
- jquery.fileupload.js
- jquery.fileupload-ui.js
- jquery.fileupload-process.js
- jquery.fileupload-validate.js
Ответ 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;
}
});
Ответ 8
Если вы новичок в понимании того, как работает обработка ошибок javascript, лучше всего прочитать эту тему: try/catch (MDN)
Однако ошибка на самом деле является методом в прототипе fileupload, поэтому теоретически эта функция будет выполняться при возникновении ошибки.
Просто добавьте {свой код} в метод 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);
}
Ответ 9
Ничего, что я нашел в этих ответах, не работало для меня, и, как ни странно, разработчики, которые написали демо для этого плагина, используют другой стиль из того, что описано в документации. Во всяком случае, это не важно.
Я скопировал код, который они использовали, чтобы заставить версию пользовательского интерфейса работать, и это, в конце концов, сделало трюк для меня. Они используют метод .on и "processalways" для проверки ошибок вместо использования метода "error" или "fail".
view-source: http://blueimp.github.io/jQuery-File-Upload/basic-plus.html
Здесь исходный код.
Приветствия