Ограничить тип файла, размер, одиночная загрузка не работает при загрузке файла jquery

0

Я пытаюсь использовать blueimp jquery file upload с помощью Spring MVC для загрузки файлов 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');
        });
Теги:
spring-mvc
jquery-file-upload

1 ответ

1
Лучший ответ

Я нашел решение по какой-то причине, следующие атрибуты не работают на Базовая загрузка Jquery Blueimp

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');
                                    }
                                },
  • 0
    Это верно, что основная загрузка файла происходит без проверки. Однако вы можете просто добавить функции проверки, включив следующий скрипт: github.com/blueimp/jQuery-File-Upload/blob/master/js/…
  • 0
    @SebastianTschan спасибо за вклад. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню