How to upload multiple files in jsp?

I have been using "input type='file' " tag to upload single file but I want to extend the functionality to upload multiple files (selecting multiple file in the same dialog box to upload). I don't have any idea how to accomplish these, any ideas and suggestions?

回答1:

(selecting multiple files in same dialog box)

Can't be done in HTML.

...unless you use an old version of Opera, which supported this. HTML file upload fields were actually supposed to support selecting and uploading multiple files in a single field, but most browsers never supported it, and many web applications would fail if you tried. So the feature is quietly ignored.

If you absolutely must have this feature (most users don't know it's even possible to ctrl-click multiple files in a finder, so some explanation will be necessary), you will have to use Flash. See eg. SWFUpload. Do provide HTML backup options for people without Flash or who hate using Flash uploaders because they seem to stiff up the browser so often (for example).

回答2:

You cannot use simple html to accomplish this. If you insist using just html, you have to make a lot of input type='file' tags.

However, javascript can help you with this, for example:

http://the-stickman.com/web-development/javascript/upload-multiple-files-with-a-single-file-element/

or google for it: http://www.google.com/search?client=safari&rls=en&q=multiple%20upload%20javascript&ie=UTF-8&oe=UTF-8

回答3:

Please refer to this http://www.roseindia.net/jsp/file_upload/uploadingMultipleFiles.shtml

回答4:

<!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>