blueImp/jquery 文件上传 - 如果文件类型不被接受，我如何收到错误消息？答案

【问题标题】：blueImp/jquery file upload - How do I get the error message if the file type was not accepted?blueImp/jquery 文件上传 - 如果文件类型不被接受，我如何收到错误消息？
【发布时间】：2012-09-20 05:19:56
【问题描述】：

我想使用 BlueImp/Jquery File Upload 来将一些图片上传到网络服务器。我有这个 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;
        }
    });
});

它之所以有效，是因为它不会上传任何不是图像的文件，但我希望能够获取错误消息（如果存在）以显示给用户。

在their demo 中，他们有一些代码（jquery.fileupload-ui.js 和 jquery.fileupload-fp.js）“神奇地”创建了带有错误的 HTML（我仍在努力理解它）。

我真的不知道我是否也应该使用这些插件并以某种方式自定义生成的 HTML，或者手动获取信息并填充它是否更简单。

我对 JS 和 Jquery 还很陌生，所以也许我遗漏了一些东西。

如何配置生成的 HTML 或如何获取错误消息？

谢谢，奥斯卡

【问题讨论】：

标签： jquery blueimp

【解决方案1】：

我知道这是一个旧线程，但如果有人仍在寻找如何获取错误消息，这里有一种方法：

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

【讨论】：

谢谢！这个data.files[index].error 正是我想要弄清楚的（错误信息保存在哪里）。
"fail" 只有在 webserver 返回错误 HTTP 响应时才会触发。但是，如果您的服务器上传处理程序通过“错误”属性返回错误，也会触发“完成”。

【解决方案2】：

为此，您可以使用文件添加回调来验证文件，像这样，使用“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;
                        }

                    }
                });

或者你可以像这样注册 fileuploadadd 回调，

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

您也可以使用以下方式访问文件上传 acceptFileTypes 选项； e.originalEvent.data.fileupload.options.acceptFileTypes

【讨论】：

它不适用于大写扩展，即文件“myphoto.JPG”无效

【解决方案3】：

正如 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 文件类型不允许”消息。

【讨论】：

这是比接受的答案更好的解决方案。在这里你使用库的验证规则而不是创建你自己的
这是一个很好的答案，因为插件文档从未提及如何正确获取错误消息并将其显示回来。

【解决方案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"}

【讨论】：

这不是一种有效的处理方式，因为即使您可以在客户端处理它，您也必须发出不必要的 http 请求。
^^ 不在IE8或IE9中，因为它不支持文件api。
@Narretz 没错。这就是我应该涵盖的缺点。

【解决方案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);
    }
});

【讨论】：

【解决方案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】：

验证文件类型（可能是“图像/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原型中的一个方法，所以理论上这个函数会在错误发生时执行。

只需将 {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);
  }

【讨论】：

这与op的问题无关。
真的吗？捕获错误与“如何获取错误消息”这个问题无关？

【解决方案9】：

我在这些回答中没有找到任何对我有用的东西，而且奇怪的是，为该插件编写演示的开发人员使用的样式与文档中描述的样式不同。无论如何，这是题外话。

我复制了他们用来让 UI 版本正常工作的代码，这对我来说终于成功了。他们使用 .on 方法和 'processalways' 来检查错误，而不是使用 'error' 或 'fail' 方法。

查看源代码：http://blueimp.github.io/jQuery-File-Upload/basic-plus.html

这是源代码。

干杯

【讨论】：

即使他们的示例也不起作用 - 我可以上传大于 999 KB 的 .jpg 文件。好尴尬。