blueImp / jquery文件上传 – 如果不接受文件类型，如何收到错误消息？
我想使用BlueImp / Jquery文件上传能够将一些图像上传到web webserver。 我有这个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('
'); $('#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或如何获取错误消息？
谢谢，奥斯卡
为此你可以使用文件添加的回调来validation文件，像这样，使用“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
您可以在这里找到更多信息;
我知道这是一个旧线程，但如果有人仍在寻找如何获取错误消息，这是一种方法：
$('#fileupload').bind('fileuploadprocessfail', function (e, data) { alert(data.files[data.index].error); });
正如user2999209所提到的，正确的方法是使用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文件类型”。
使用processfail回调
$('#fileupload').fileupload({ maxFileSize: 5000000, done: function (e, data) { $.each(data.result.logo, function (index, file) { $('').text(file.name).appendTo('#fileupload-files'); }); }, processfail: function (e, data) { alert(data.files[data.index].name + "\n" + data.files[data.index].error); } });
如果您使用的是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"}
加载脚本的顺序对于使用默认validation过程显示错误消息很重要 ，
这个订单对我有用：
- 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
最好validation文件类型（它的格式类似于“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; } });
如果您不熟悉javascripterror handling的工作原理，最好阅读以下主题： try / catch（MDN）
但是，错误实际上是fileupload原型中的一个方法，所以理论上这个函数将在错误发生时执行。
只需将{your code}添加到方法中的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); }
我在这些回答中找到的任何内容都没有为我工作，奇怪的是，为该插件编写演示的开发人员使用了与文档中描述的不同的风格。 无论如何，这不是重点。
我复制了他们用来使UI版本工作的代码，这最终为我做了诀窍。 他们使用.on方法和’processalways’来检查错误，而不是使用’error’或’fail’方法。
view-source： http ： //blueimp.github.io/jQuery-File-Upload/basic-plus.html
这是源代码。
干杯