Question

我一直在使用“input type ='file'”标签上传单个文件，但我想扩展上传多个文件的功能（在同一个对话框中选择多个文件进行上传）。我不知道如何完成这些，任何想法和建议？

Answer 1

（在同一个对话框中选择多个文件）

不能用HTML完成。

...除非您使用支持此功能的旧版Opera。 HTML文件上传字段实际上应该支持在单个字段中选择和上传多个文件，但大多数浏览器从不支持它，如果您尝试过，许多Web应用程序都会失败。因此该功能被悄然忽略。

如果您绝对必须拥有此功能（大多数用户不知道甚至可以在查找程序中按住Ctrl键单击多个文件，因此需要进行一些说明），您将不得不使用Flash。见例如。 SWFUpload。为没有Flash的人或不喜欢使用Flash上传器的人提供HTML备份选项，因为它们似乎经常使浏览器变得僵硬（例如）。

Answer 2

你无法使用简单的html来实现这一目标。如果你坚持只使用html，你必须制作很多 input type ='file'标签。

但是，javascript可以帮助您解决此问题，例如：

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

或谷歌： http://www.google.com/search?client=safari&rls=en&q=multiple%20upload%20javascript&ie=UTF-8&oe=UTF-8

Answer 3

请参阅此 http://www.roseindia.net/jsp/file_upload/uploadingMultipleFiles.shtml

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

如何在jsp中上传多个文件？

4 个答案: