Как загрузить несколько файлов в JSP? - PullRequest
Новая
       19

Как загрузить несколько файлов в JSP?

2 голосов
/ 16 сентября 2009

Я использовал тег "input type = 'file'" для загрузки одного файла, но я хочу расширить функциональность для загрузки нескольких файлов (выбирая несколько файлов в одном диалоговом окне для загрузки). Я понятия не имею, как это сделать, какие-нибудь идеи и предложения?

Ответы [ 4 ]

4 голосов
/ 16 сентября 2009

(выбор нескольких файлов в одном диалоговом окне)

Не может быть сделано в HTML.

... если вы не используете старую версию Opera, которая поддерживала это. Поля загрузки файлов HTML фактически должны были поддерживать выбор и загрузку нескольких файлов в одном поле, но большинство браузеров никогда не поддерживали его, и многие веб-приложения не работали бы, если бы вы попытались. Так что функция незаметно игнорируется.

Если вам абсолютно необходима эта функция (большинство пользователей даже не знают, что можно щелкнуть несколько файлов в видоискателе с помощью Ctrl, поэтому потребуется пояснение), вам придется использовать Flash. См. Например SWFUpload . Предоставляйте варианты резервного копирования HTML для людей без Flash или тех, кто ненавидит использовать загрузчики Flash, потому что они, кажется, слишком часто загружают браузер (например).

2 голосов
/ 16 сентября 2009

Вы не можете использовать простой HTML для достижения этой цели. Если вы настаиваете на использовании только html, вам нужно сделать много тегов input type = 'file' .

Однако в этом вам может помочь javascript, например:

http://the -stickman.com / веб-разработка / JavaScript / закачивать-несколько-файлов-с-одним файлом-элемент /

или Google для этого: http://www.google.com/search?client=safari&rls=en&q=multiple%20upload%20javascript&ie=UTF-8&oe=UTF-8

0 голосов
/ 13 марта 2018 
<!DOCTYPE html>
<html>
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<Script type="text/javascript" src="upload.js"></script>

</head>
<body>
<div class="container">
        <!-- The file upload form used as target for the file upload widget -->
        <form id="fileupload" action="#" method="POST" enctype="multipart/form-data">

            <div class="row files" id="files1">
                <h2>Files 1</h2>
                <span class="btn btn-default btn-file">
                    Browse <i class="fa fa-paperclip"></i> <input type="file" name="files1" multiple />
                </span>
                <br />
                <ul class="fileList"></ul>
            </div>

            <div class="row">
                <button type="x" id="uploadBtn" class="btn primary start">Start upload</button>
            </div>

            <br>
            <div class="row">
                <div class="span16">

                    <table class="zebra-striped"><tbody class="files"></tbody></table>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript">
    $.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
    var fileIdCounter = 0;

    this.closest(".files").change(function (evt) {
        var output = [];

        for (var i = 0; i < evt.target.files.length; i++) {
            fileIdCounter++;
            var file = evt.target.files[i];
            var fileId = sectionIdentifier + fileIdCounter;

            filesToUpload.push({
                id: fileId,
                file: file
            });

            var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + fileId + "\">Remove</a>";

            output.push("<li><strong>", escape(file.name), "</strong> - ", file.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
        };

        $(this).children(".fileList")
            .append(output.join(""));

        //reset the input to null - nice little chrome bug!
        evt.target.value = null;
    });

    $(this).on("click", ".removeFile", function (e) {
        e.preventDefault();

        var fileId = $(this).parent().children("a").data("fileid");

        // loop through the files array and check if the name of that file matches FileName
        // and get the index of the match
        for (var i = 0; i < filesToUpload.length; ++i) {
            if (filesToUpload[i].id === fileId)
                filesToUpload.splice(i, 1);
        }

        $(this).parent().remove();
    });

    this.clear = function () {
        for (var i = 0; i < filesToUpload.length; ++i) {
            if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
                filesToUpload.splice(i, 1);
        }

        $(this).children(".fileList").empty();
    }

    return this;
};

$(function () {
    var filesToUpload = [];

    var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");

    $("#uploadBtn").click(function (e) {
        e.preventDefault();

        var formData = new FormData();

        for (var i = 0, len = filesToUpload.length; i < len; i++) {
            formData.append("files", filesToUpload[i].file);
        }

        $.ajax({
            url: "http://requestb.in/1k0dxvs1",
            data: formData,
            processData: false,
            contentType: false,
            type: "POST",
            success: function (data) {
                alert("DONE");

                files1Uploader.clear();

            },
            error: function (data) {
                alert("ERROR - " + data.responseText);
            }
        });
    });
});


    </script>
    </body>
    </html>
0 голосов
/ 16 сентября 2009

Пожалуйста, обратитесь к этому http://www.roseindia.net/jsp/file_upload/uploadingMultipleFiles.shtml

...