blueImp/jquery文件上传-如果不接受文件类型，如何获取错误消息? [英] blueImp/jquery file upload - How do I get the error message if the file type was not accepted?

问题描述

我想使用BlueImp/Jquery File Upload能够将一些图像上传到Web Web服务器. 我有这个JS代码，是通过阅读许多资源生成的

I want to use the BlueImp/Jquery File Upload to be able to upload some images to web webserver. I have this JS code which I generated by reading many sources

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

它之所以有效，是因为它没有上传不是图像的任何文件，但是我希望能够将错误消息(如果存在的话)显示给用户.

It works because it doesn't upload any file which is not an image, but I would like to be able to get the error messages (in case it exists) to show to the user.

在其演示中，他们有一些代码(jquery.fileupload-ui.js和jquery.fileupload-fp.js)神奇地"创建了HTML，并且内部出现错误(我仍在努力理解).

In their demo they have some code (jquery.fileupload-ui.js and jquery.fileupload-fp.js) that create "magically" the HTML with the error inside (I am still strugling to understand it).

如果我也应该使用这些插件，并且以某种方式自定义正在生成的HTML，或者手动获取信息并填充它更简单，我并不确定.

I don't really get if I should use these plugins too and somehow customize the HTML being generated or if it is simpler to get the info manually and populate it.

我对JS和Jquery还是很陌生，所以也许我缺少了一些东西.

I am pretty new to JS and Jquery, so maybe I am missing something.

如何配置正在生成的HTML或如何获取错误消息?

How do I configure the HTML being generated or how do I get the error message?

谢谢， 奥斯卡

推荐答案

为此，您可以使用添加文件的回调来验证文件，例如，请使用"return false"来避免添加该文件；

For this you can use file added callback to validate files, like this, use "return false" to avoid adding that file;

 $('#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回调，

or you can register fileuploadadded callback like this,

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

also you can access fileupload acceptFileTypes options using; e.originalEvent.data.fileupload.options.acceptFileTypes

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

You can find more information here;

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

这篇关于blueImp/jquery文件上传-如果不接受文件类型，如何获取错误消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！