blueImp/jquery文件上传 - 如果不接受文件类型,如何收到错误消息？

Question

我想使用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('<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

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

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

Answer 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;
                        }

                    }
                });

或者您可以像这样注册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 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文件类型".

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);
    }
});