在blueimp文件上传文件的最大尺寸和acceptfiletypes不工作。为什么?

rae1YoBre提出了一个问题:maxFileSize and acceptFileTypes in blueimp file upload plugin do not work. Why?,或许与您遇到的问题类似。

回答者PaulMrG给出了该问题的处理方式:

Had the same problem, and the blueimp guy says "maxFileSize and acceptFileTypes are only supported by the UI version" and has provided a (broken) link to incorporate the _validate and _hasError methods.

So without knowing how to incorporate those methods without messing up the script I wrote this little function. It seems to work for me.

Just add this

add: function(e, data) {
        var uploadErrors = [];
        var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
            uploadErrors.push('Filesize is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.submit();
        }
},

at the start of the .fileupload options as shown in your code here

$(document).ready(function () {
    'use strict';

    $('#fileupload').fileupload({
        add: function(e, data) {
                var uploadErrors = [];
                var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
                if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                    uploadErrors.push('Not an accepted file type');
                }
                if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {
                    alert(uploadErrors.join("\n"));
                } else {
                    data.submit();
                }
        },
        dataType: 'json',
        autoUpload: false,
        // acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        // maxFileSize: 5000000,
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
                .appendTo('#div_files');
            });
        },
        fail: function (e, data) {
            $.each(data.messages, function (index, error) {
                $('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
                .appendTo('#div_files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('#progress .bar').css('width', progress + '%');
        }
    });
});

You'll notice I added a filesize function in there as well because that will also only work in the UI version.

Updated to get past issue suggested by @lopsided: Added data.originalFiles[0]['type'].length and data.originalFiles[0]['size'].length in the queries to make sure they exist and are not empty first before testing for errors. If they don't exist, no error will be shown and it will only rely on your server side error testing.

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:用jQuery添加/删除JSON数据项
下一篇:按值选择选项元素

相关推荐

  • (HTML)下载PDF文件,而不是在浏览器中单击时打开它们。

    MikeD404Error提出了一个问题:(HTML) Download a PDF file instead of opening them in browser when clicked,或许与您...

    3 年前
  • 随着开放式函数参数文件

    tugberk提出了一个问题:open-ended function arguments with TypeScript,或许与您遇到的问题类似。 回答者David Harknesschuckj给出了...

    3 年前
  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且...

    5 年前
  • 阿贾克斯XMLHttpRequest文件上传

    Sedat Başar提出了一个问题:Upload File With Ajax XmlHttpRequest,或许与您遇到的问题类似。 回答者timdream给出了该问题的处理方式: There ...

    3 年前
  • 阻止浏览器加载拖放文件

    dtbarneTravis提出了一个问题:Prevent browser from loading a drag-and-dropped file,或许与您遇到的问题类似。

    3 年前
  • 链接和执行外部JavaScript文件托管在GitHub上

    AuthorProxy提出了一个问题:Link and execute external JavaScript file hosted on GitHub,或许与您遇到的问题类似。

    3 年前
  • 通过javascript清除HTML文件上载字段

    Hutch MooreChris Burgess提出了一个问题:Clearing an HTML file upload field via JavaScript,或许与您遇到的问题类似。

    3 年前
  • 通过jQuery下载文件

    Cœurhguser提出了一个问题:Download a file by jQuery.Ajax,或许与您遇到的问题类似。 回答者CommunityJohn Culviner给出了该问题的处理方式: ...

    3 年前
  • 递归Node.js复制文件夹

    lostsource提出了一个问题:Copy folder recursively in node.js,或许与您遇到的问题类似。 回答者shift66给出了该问题的处理方式: You can use...

    3 年前
  • 输入类型=文件选择事件

    Edu FelipeMoon提出了一个问题:HTML File Selection Event,或许与您遇到的问题类似。 回答者Anurag给出了该问题的处理方式: Listen to the ch...

    3 年前

公众号

欢迎 JavaScript 爱好者