Javascript 限制文件类型、大小、单个上载和#x27；无法在jquery文件上载中工作

我正在尝试使用SpringMVC插件来上传excel文件。这些文件正在被上传。我想将文件类型限制为excel（xls，xlxs），也只允许单个文件上载。我使用插件推荐的参数，还尝试添加

add:

回调来执行验证，但两种方法都不起作用。请帮忙

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

jquery.min.js
jquery.ui.widget.js
jquery.iframe-transport.js
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代码是：

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

$（函数（）{
"严格使用",；
//服务器端上载处理程序的位置：
var url=''；
$（“#文件上载”）
.文件上传(
{
//这不管用
添加：功能（e、数据）{
var uploadErrors=[]；
var acceptFileTypes=/（\.\/）（xls | xlsx）$/i；
警报（接受文件类型）
.test（data.originalFiles[0].type））；
if（data.originalFiles[0][type'].length
&&接受文件类型
.test（data.originalFiles[0].type））{
上传错误
.push（'不是可接受的文件类型'）；
}
if（data.originalFiles[0]['size'].length
&&数据。原始文件[0]['size']>5000000）{
上传错误
.push（“文件大小太大”）；
}
如果（uploadErrors.length>0）{
警报（上传错误。加入（“\n”）；
}否则{
data.submit（）；
}
},   
数据类型：“json”，
maxFileSize:50000，//这不起作用
acceptFileTypes:/（\.\/）（xls | xlsx）$/i，//这不起作用
singleFileUploads:true，
maxNumberOfFiles:1，
完成：功能（e，数据）{
$（“tr:has（td）”）.remove（）；
$.each（data.result、函数（索引、文件）{
$（“#上载的文件”）.append(
$('')
.append（$（''）.text（file.fileName））
.append（$（''）.text（file.fileSize））
.append（$（''）.text（file.fileType））
.append（$（“”）.html（“”）
)//end$（“#上载的文件”）.append（）
}); 
},
失败：功能（e，数据）{
$
.每个(
数据、信息、，
函数（索引、错误）{
$(
上传文件错误：“
”）
.附录(
"档案",；
});
},
progressall：功能（e、数据）{
var progress=parseInt（data.loaded
/数据（总计*100,10）；
$（'#progress.progress bar'）.css（'宽度'，
进展("""""""""""""；
}
}).prop（'disabled'，！$.support.fileInput）.parent（）
.addClass（$.support.fileInput？未定义：“已禁用”）；
});

由于某些原因，我自己找到了解决方案。以下属性不适用

因此，我不得不使用我的问题中提到的

add:

回调，但对上面的回调做了一些修改，我就让它工作了。下面是新的回调：

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

---

基本文件上传未经验证是正确的。但是，您可以通过包含以下脚本简单地添加验证功能：

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

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