将文件夹上传到服务器（mvc spring）答案

【问题标题】：Upload a folder to server(mvc spring)将文件夹上传到服务器（mvc spring）
【发布时间】：2016-05-26 13:07:56
【问题描述】：

我尝试将文件夹的内容上传到服务器。但我做不到，所以我做了一个例子，你必须选择每个文件。

控制器：

@Controller
public class FileUploadController {


    @RequestMapping(value = "/save", method = RequestMethod.POST)
    public String save(@ModelAttribute("uploadForm") FileUploadForm uploadForm,Model map) {}
}

和 jsp 文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <title> - Upload</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    //add more file components if Add is clicked
    $('#addFile').click(function() {
        var fileIndex = $('#fileTable tr').children().length;
        $('#fileTable').append(
                '<tr><td>'+
                '   <input type="file" name="files['+ fileIndex +']" />'+
                '</td></tr>');
    });

});
</script>

</head>
<body>

<div align="center" class="jumbotron">
<h1>dd</h1>
<form:form method="post" action="save.html"
        modelAttribute="uploadForm" enctype="multipart/form-data">

    <p>Dateien auswählen zum uploaden</p>

    <input class="btn btn-success" id="addFile" type="button" value="Datei hinzufügen" />
    <table align="center" class="table table-striped" id="fileTable">
        <tr>
            <td><input name="files[0]" type="file" /></td>
        </tr>
        <tr>
            <td><input name="files[1]" type="file" /></td>
        </tr>
    </table>
    <br/><input class="btn btn-primary" type="submit" value="Upload" />
</form:form>
</div>

</body>
</html>

效果很好。我发现了一些示例，我可以一次选择多个文件（只需添加多个），但无法上传它们。我遇到了一些麻烦才能让这个工作。我很惊讶做一件如此“简单”的事情是如此“困难”。我不知道我是否必须更改我的控制器文件或只更改我的 jsp 文件。我希望有人可以解释我这是如何工作的。我是新人，所以请像对一个小傻孩子一样跟我说话。问候山姆

【问题讨论】：

标签： javascript java spring model-view-controller file-upload

【解决方案1】：

表单上的单个文件输入：

如果您只需要选择多个文件并上传它们，那么您几乎做到了。您只需将表单模型中的字段声明为List：

public class FileUploadForm {

    private List<MultipartFile> files;

    public List<MultipartFile> getFiles() {
        return files;
    }

    public void setFiles(List<MultipartFile> files) {
        this.files = files;
    }
}

现在在您的控制器中，您可以访问此列表：

@Controller
public class FileUploadController {


    @RequestMapping(value = "/save", method = RequestMethod.POST)
    public String save(@ModelAttribute("uploadForm") FileUploadForm uploadForm, Model map) {

        for(MultipartFile file : uploadForm.getFiles()){
            try {
                file.transferTo(new File(targetPath+file.getOriginalFilename()));
            } catch (IOException e) {
                throw new RuntimeException();
            }
        }
    }

}

在您的表单中，您必须指定文件输入的multiple 属性：

  <form:form method="post" action="/save" modelAttribute="uploadForm" enctype="multipart/form-data">
      <input name="files" type="file" multiple=""/>
      <button type="submit">Upload</button>
  </form:form>

注意，这样你不应该在输入名称中使用数组语法，比如file[]。

表单上的多个文件输入。

让我们考虑一下，当您为每个文件添加新文件输入时，是否要加载文件，如代码 sn-ps 中所示。首先，从表单模型中删除字段List<MultipartFile> files。我们将通过另一种方式得到它。现在控制器方法如下：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String upload(@ModelAttribute("uploadForm")FileUploadModel uploadForm,
                     @RequestParam("files[]") List<MultipartFile> fileList, ModelMap model) throws IOException {
        for(MultipartFile file : fileList){
           try {
               file.transferTo(new File(targetPath+file.getOriginalFilename()));
           } catch (IOException e) {
               throw new RuntimeException(e);
           }
      }
}

如您所见，现在我们分别声明了表单模型和文件列表。另请注意，该列表具有 @RequestParam 和表单字段的名称。这个名字是用数组语法指定的——files[]。

现在，表单应该是什么样子：

  <form:form method="post" action="/save" modelAttribute="uploadForm" enctype="multipart/form-data">
      <input name="files[]" type="file" multiple=""/>
      <input name="files[]" type="file" multiple=""/>
      <input name="files[]" type="file" multiple=""/>
      <button type="submit">Upload</button>
  </form:form>

在此示例中，我静态添加了多个文件输入，但您确实可以使用 javascript 动态执行此操作。请注意，您不应在输入名称中指定数组项的索引。只是files[]，而不是files[0] 或file[1]。

顺便说一句，在单个文件输入的情况下，您也可以接收文件列表作为方法的参数。只需从模型中删除文件列表并将其声明为控制器方法的参数即可。

【讨论】：