logo标签列表

blueImp/jquery文件上传 - 如果文件类型不被接受，我该如何获取错误信息？

jqueryblueimp
28

我想使用BlueImp/Jquery文件上传来上传一些图片到Web服务器。我有这段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，或者如何获取错误消息？
谢谢， 奥斯卡
9个回答
35

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

$('#fileupload').bind('fileuploadprocessfail', function (e, data) {
    alert(data.files[data.index].error);
});
谢谢！这个 data.files[index].error 正是我一直在尝试找出的（错误信息被保存在哪里）。 - nzifnab
1
只有当 Web 服务器返回错误的 HTTP 响应时，“失败” 才会触发。但是如果您的服务器上传处理程序通过“error”属性返回错误，则还将触发“完成”。 - Vladislav Rastrusny
16

你可以使用文件添加回调来验证文件，像这样，使用 "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;
                    }
                });

同时，您可以使用以下方式访问 fileupload acceptFileTypes 选项：

e.originalEvent.data.fileupload.options.acceptFileTypes

您可以在此处找到更多信息：

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

它无法处理大写扩展名，例如文件“myphoto.JPG”将无效。 - Oleg Sh
14

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

这是比被接受的答案更好的解决方案。在这里，您使用库的验证规则而不是创建自己的规则。 - Roman Yakoviv
这是一个很好的答案，因为插件文档从未提到如何正确获取错误消息并将其显示回来。 - ooi18
6
如果您正在使用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请求。 - Narretz
不支持文件API的原因是IE8和IE9浏览器无法使用。 - Björn
@Narretz 没错。那是我应该注意到的缺点。 - addlistener
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);
    }
});
2

加载脚本的顺序对于默认验证过程显示错误信息非常重要

以下是我使用的正确顺序：

  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
你能提供一些工作示例吗？我无法理解默认验证过程。我的脚本顺序是相同的。由于某种原因，处理事件从未被触发... - Vlatko
1
最好验证文件类型（格式应为“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;
                    }
                });
0

如果您是新手，想要了解JavaScript错误处理的工作原理，最好先阅读相关主题：try/catch (MDN)。

然而，错误实际上是文件上传原型中的一个方法，因此在发生错误时，理论上该函数将执行。

只需在该方法的errorHandler中添加{your code}即可。

...
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);
  }
这与提问者的问题无关。 - Madbreaks
真的吗？捕获错误与“如何获取错误消息”这个问题无关。 - Talvi Watia
0

我在这些答案中找到的方法都对我无效，而且很奇怪，为那个插件编写演示文稿的开发人员使用的风格与文档中描述的不同。无论如何，这是次要的问题。

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

view-source:http://blueimp.github.io/jQuery-File-Upload/basic-plus.html

这是源代码。

谢谢。

即使他们的示例也无法正常工作 - 我可以上传大小超过999 KB的 .jpg 文件。真是尴尬。 - Madbreaks
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接