限制文件类型，大小，单个上载在jquery文件上传时不起作用 [英] Restrict filetype ,size,single upload doesn't work in jquery file upload

问题描述

我正在尝试使用 blueimp jquery file upload 插件Spring MVC上传excel文件。文件上传。我想将文件类型限制为excel（xls，xlxs），也只允许单个文件上传。我正在使用插件推荐的参数，也尝试添加 add：回调来执行验证，它都不起作用。任何帮助请。

I am trying to use the blueimp jquery file upload plugin with Spring MVC to upload the excel files.The files are getting uploaded. I would like to restrict the file type to excel(xls,xlxs),also allow only single file uploads . I am using the parameters as recommended by the plugin, also tried adding the add: callback to perform the validation neither of it works . Any help please .

我正在使用的js文件（按相同的顺序）

The js file I'm using(in the same order)

jquery.min.js
    <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
jquery.ui.widget.js
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
jquery.iframe-transport.js
    <!-- The basic File Upload plugin -->
jquery.fileupload.js
bootstrap.min.js

我的HTML代码是

<!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-default fileinput-button"> <i
                    class="fa fa-1x fa-plus"></i> <span>Select files...</span> <!-- The file input field used as target for the file upload widget -->
                    <input id="fileupload" type="file" name="files[]" data-url="file/upload" multiple>
                </span> <br> <br>
                <!-- The global progress bar -->
                <div id="progress" class="progress">
                    <div class="progress-bar progress-bar-success"></div>
                </div>
                <!-- The container for the uploaded files -->
                 <div id="files" class="files"></div>
                <table id="uploaded-files" class="table table-striped table-bordered dataTable">
                    <tr>
                        <th>File Name</th>
                        <th>File Size</th>
                        <th>File Type</th>
                        <th>Download</th>
                    </tr>
                </table>

javascript代码为：

the javascript code is:

$(function() {
            'use strict';
            //  the location of your server-side upload handler:
            var url = '';

            $('#fileupload')
                    .fileupload(
                            {
                                //this doesnt work
                                add : function(e, data) {
                                var uploadErrors = [];
                                var acceptFileTypes = /(\.|\/)(xls|xlsx)$/i;

                                alert(acceptFileTypes
                                    .test(data.originalFiles[0].type));
                                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',
                                maxFileSize : 50000,//this doesnt work
                                acceptFileTypes : /(\.|\/)(xls|xlsx)$/i, //this doesnt work 
                                singleFileUploads : true,
                                maxNumberOfFiles : 1,
                                done: function (e, data) {
                                    $("tr:has(td)").remove();
                                    $.each(data.result, function (index, file) {

                                        $("#uploaded-files").append(
                                                $('<tr/>')
                                                .append($('<td/>').text(file.fileName))
                                                .append($('<td/>').text(file.fileSize))
                                                .append($('<td/>').text(file.fileType))
                                                .append($('<td/>').html("<a href='file/get/"+index+"'>Click</a>"))
                                                )//end $("#uploaded-files").append()
                                    }); 
                                },

                                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(
                                                                        '#files');
                                                    });
                                },
                                progressall : function(e, data) {
                                    var progress = parseInt(data.loaded
                                            / data.total * 100, 10);
                                    $('#progress .progress-bar').css('width',
                                            progress + '%');
                                }
                            }).prop('disabled', !$.support.fileInput).parent()
                    .addClass($.support.fileInput ? undefined : 'disabled');
        });

推荐答案

我出于某种原因自行找到了解决方案以下属性不适用于基本Jquery Blueimp文件上传

I found the solution myself for some reason the following attributes doesnt work on Basic Jquery Blueimp file upload

maxFileSize : 50000,//this doesnt work
acceptFileTypes : /(\.|\/)(xls|xlsx)$/i, //this doesnt work 
singleFileUploads : true,
maxNumberOfFiles : 1,

所以我不得不使用我的问题中提到的 add：回调，但上面的回调几乎没有变化，我得到了它的工作。这是新的回调：

so I had to use the add: callback as mentioned in my question but with little changes to the callback above I got it working.Here is the new callback:

add : function(e, data) {
                                    var uploadErrors = [];
                                    if (!(/(\.|\/)(xls|xlsx)$/i)
                                            .test(data.files[0].name)) {
                                        uploadErrors
                                                .push('Not an accepted file type');
                                    }
                                    if (data.files[0].size > 5000000) {
                                        uploadErrors
                                                .push('Filesize is too big');
                                    }
                                    if (uploadErrors.length > 0) {
                                        alert(uploadErrors.join("\n"));
                                    } else {
                                        data.submit();
                                        $('#fileupload').fileupload('disable');
                                    }
                                },

这篇关于限制文件类型，大小，单个上载在jquery文件上传时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！