java - 表中具有不同 id 的多个文件上传

Question

尝试调整代码: http://blog.netgloo.com/2015/02/08/spring-boot-file-upload-with-ajax/

只需一个文件输入就可以很好地工作(在多个项目中使用没有问题)。

我的要求是创建一个表，每行都有一个文件输入。

我向输入文件的 ID 添加了代码。我稍后将在我的 Controller 中使用该代码。

我创建表(确定)

<div class="table-responsive" th:if="${not #lists.isEmpty(objects)}">
  <table id="d" class="table table-hover table-sm table-responsive ">
    <thead class="thead-inverse">
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Address</th>
      <th>Telephone</th>
      <th>File Upload</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="object: ${objects}">
      <td th:text="${object.code}"></td>
      <td th:text="${object.name}"></td>
      <td th:text="${object.addres}"></td>
      <td th:text="${object.telephone}"></td>
      <td>
        <form th:id="'uploadfileform-' + ${object.code}">
          <div class="form-group">
            <label class="custom-file">
              <input type="file" th:id="'uploadfileinput-' + ${object.code}"
                     name="uploadfile" accept="*" aria-describedby="fileHelp"
                     class="custom-file-input"/>
              <span class="custom-file-control"></span>
            </label>
          </div>
        </form>
      </td>
    </tr>
    </tbody>
  </table>
</div>

我添加到表单的id，并且输入已分配值。

我的jquery

第 1 部分(好的)

$(document).ready(function () {
    $('input[type="file"]').change(function (e) {
        var id = $(this).attr('id');
        var res = id.split("-");
        // I pass the code
        uploadFile(res[1]);
    });
});

第 2 部分(失败)

function uploadFile(id) {
    $.ajax({
        url: "/uploadFile",
        type: "POST",
        data: new FormData($("#uploadfileform" + id)[0]),
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        cache: false,
        success: function () {
            // Handle upload success
            $("#upload-file-message").text(
                "File succesfully uploaded");
            alert("File succesfully uploaded");
        },
        error: function () {
            // Handle upload error
            $("#upload-file-message")
                .text(
                    "File not uploaded (perhaps it's too much big)");
            alert("File not uploaded (perhaps it's too much big)");
        }
    });
}

我相信它失败了:

data : new FormData($("#uploadfileform"+id)[0]),

但我看不到调试的方法。

这是 Controller 的一部分，就像博客中一样:

@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
@ResponseBody
public ResponseEntity<?> uploadFile(@RequestParam("uploadfile") MultipartFile uploadfile) {

更新1

将数据更改为:

data : new FormData($('input[type="file"]')[0]),

在这两种情况下我都会得到

POST http://localhost:8080/uploadFile 400 ()

谢谢

更新2

$(document).ready(function () {
    //http://blog.netgloo.com/2015/02/08/spring-boot-file-upload-with-ajax/
    $('input[type="file"]').change(function (e) {

        //var file = $('input[type="file"][0]');
        var file = $('input[type="file"]')[0];

        alert("File name: " + file.fileName);
        alert("File size: " + file.fileSize);

    });
});

我未定义，所以我认为这种代码对于这种情况是不正确的。

Answer 1

您提供的代码中有两个问题。一是您的服务器 application.properties 缺少 upload.file.path。所以我添加了

upload.file.path = ./

JavaScript 代码中的下一个

            $('input[type="file"]').change(function(e) {
                //id is undefined
                var id = $(this).attr('id');

您分配的 ID 位于表单字段中，而不是输入中。所以我更新如下

<form th:id="'uploadfileform-'+${directory.code}">
    <div class="form-group">
        <label class="custom-file"> <input type="file"
            th:name="uploadfile" accept="*" aria-describedby="fileHelp"
            class="custom-file-input"/> <span
            class="custom-file-control"></span>
        </label>
    </div>
</form>

至

<form th:id="'uploadfileform-'+${directory.code}">
    <div class="form-group">
        <label class="custom-file"> <input type="file"
            th:name="uploadfile" accept="*" aria-describedby="fileHelp"
            class="custom-file-input" th:id="'uploadfileinput-'+${directory.code}"/> <span
            class="custom-file-control"></span>
        </label>
    </div>
</form>

经过这两个更改后，它工作正常