Question

我正在使用此代码将文件上传到服务器（以html格式）：

    <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
    <label>upload file<input type="file" name="file" id="file" /></label>
    <label><input type="submit" name="button" id="button" value="Submit" /></label></form>

这是打开的文件浏览器，让我选择一个文件，当我按下提交时，文件将被发送到我的服务器。

我想知道是否有办法让多个文件选择。

Answer 1

您可以使用multiple属性，如下所示：

<input type="file" multiple />

要选择多个文件，您需要按Ctrl键并单击要添加的文件。

Answer 2

多个文件选择＆amp;使用Spring Framework上传

在这篇文章中，我描述了多文件上传的服务器端和客户端代码。

以下代码用于提及appContext.xml中的多部分数据

<强> appContext.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- one of the properties available; the maximum file size in bytes -->
    <property name="maxUploadSize" value="20971520"/>
</bean>

<强> Simpleupload.jsp：

用于多文件上传的

脚本：

<script type="text/javascript">
    var totalsizeOfUploadFiles = 0;
    function getFileSizeandName(input)
    {
        var select = $('#uploadTable');
        for(var i =0; i<input.files.length; i++)
        {           
            var filesizeInBytes = input.files[i].size;
            var filesizeInMB = (filesizeInBytes / (1024*1024)).toFixed(2);
            var filename = input.files[i].name;
            //alert("File name is : "+filename+" || size : "+filesizeInMB+" MB || size : "+filesizeInBytes+" Bytes");
            if(i<=4)
            {               
                $('#filetd'+i+'').text(filename);
                $('#filesizetd'+i+'').text(filesizeInMB);
            }
            else if(i>4)
                select.append($('<tr id=tr'+i+'><td id=filetd'+i+'>'+filename+'</td><td id=filesizetd'+i+'>'+filesizeInMB+'</td></tr>'));
            totalsizeOfUploadFiles += parseFloat(filesizeInMB);
            $('#totalsize').text(totalsizeOfUploadFiles.toFixed(2)+" MB");
            if(i==0)
                $('#filecount').text("1file");
            else
            {
                var no = parseInt(i) + 1;
                $('#filecount').text(no+"files");
            }                       
        }           
    }

    function CloseAndRefresh() 
    {
        opener.location.reload(true);
        self.close();
    }       
</script>

html表单设计：

<body>
<form method="post" id="uploadForm" action="upload" enctype="multipart/form-data">
    <table class="span10">
        <tr>
            <td colspan="3">
                <legend>Simple Upload</legend>
            </td>
        </tr>
        <tr>
            <td>
                <input type="file" name="files[]" multiple="multiple" onchange="getFileSizeandName(this);"/>
            </td>
        </tr>
        <tr>    
            <td colspan="3">
                <div id="uploaddiv">
                    <table id="uploadTable" class="table table-striped table-bordered">
                        <tr>
                            <th>Title</th>
                            <th>Size</th>
                        </tr>
                        <tbody id="tbodyid">
                            <tr id="tr0">
                                <td id="filetd0" height="10px" width="50px"></td>
                                <td id="filesizetd0" height="10px" width="5px"></td>
                            </tr>
                            <tr id="tr1">
                                <td id="filetd1"></td>
                                <td id="filesizetd1"></td>
                            </tr>
                            <tr id="tr2">
                                <td id="filetd2"></td>
                                <td id="filesizetd2"></td>
                            </tr>
                            <tr id="tr3">
                                <td id="filetd3"></td>
                                <td id="filesizetd3"></td>
                            </tr>
                            <tr id="tr4">
                                <td id="filetd4"></td>
                                <td id="filesizetd4"></td>
                            </tr>                                           
                        </tbody>
                        <tfoot>
                            <tr>
                                <td id="filecount"></td><td id="totalsize"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <button class="btn btn-primary" type="submit" id="startButton" onClick="CloseAndRefresh();">Start</button>
                <button class="btn" id="cancelButton">Cancel</button>
            </td>   
        </tr>
    </table>
</form>

UploadController.java代码：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public void UploadReceipts(@RequestParam("files[]") List<MultipartFile> file) throws Exception {
    logger.info(" Inside the upload receipts method "+file.size());
    for(int i=0; i< file.size(); i++)
    {
        if(!file.get(i).isEmpty())
        {
            CommonsMultipartFile cm = (CommonsMultipartFile) file.get(i);
            logger.info(" Inside the file upload method "+cm.getOriginalFilename());
            simpleUploadService.uploadFileandSaveReceipt(cm);
        }
    }   
}

Answer 3

如果在表单提交时使用多个文件上传

<input type="file" name="file[]" multiple>

它创建了一个文件数组，可以从该数组中轻松获取文件名。

Answer 4

最简单的方法是直接布局字段，如下所示：

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label>upload file<input type="file" name="file[]" id="file1" /></label>
<label>upload file<input type="file" name="file[]" id="file2" /></label>
<label>upload file<input type="file" name="file[]" id="file3" /></label>
<label><input type="submit" name="button" id="button" value="Submit" /></label></form>

阅读this，了解如何处理服务器端的文件。

但是，如果你想要更好看的东西，你应该看看uploadify。

**关于@dotwebs的答案，多重属性为not supported by some browsers。

Answer 5

您可以添加如下多重属性：

<input type="file" multiple="true" />

多个文件选择并上传

5 个答案: