Clever Geek Handbook

How to load multiple files in jsp?

I am using input type = 'file' tag to upload a single file, but I want to expand the functionality to upload multiple files (select multiple files in the same dialog to upload). I don't know how to do this, any ideas and suggestions?

+2


source to share


4 answers


(select multiple files in the same dialog)

Unable to execute in HTML.



... unless you are using an older version of Opera that supported this. HTML file upload fields were actually supposed to support selecting and loading multiple files in one field, but most browsers never supported it, and many web applications would fail if you tried. So the function is silently ignored.

If you absolutely must have this feature (most users don't know that it is even possible to ctrl-click multiple files in a search engine, so some explanation is needed), then you will have to use Flash. See for example. SWFUpload . Provide HTML backup options for people without Flash or who hate the use of Flash downloaders because they seem to delay the browser often (for example).

+4


source


You cannot use plain html for this. If you insist on using only html, you need to do 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

+2


source


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

0


source 


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


source






More articles:


All Articles