Question

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

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

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代码是：

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

Answer 1

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

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

所以我不得不使用我的问题中提到的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');
                                    }
                                },

限制文件类型，大小，单个上传在jquery文件上传中不起作用

1 个答案: