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

Question

尝试修改以下代码： http://blog.netgloo.com/2015/02/08/spring-boot-file-upload-with-ajax/

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

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

我在输入文件的 id 中添加了一个代码。稍后我将在我的控制器中使用该代码。

我创建了表（好的）

<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 并且 input 已分配值。

我的 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]),

但我看不到调试方法。

这是控制器的一部分，与博客中的完全一样：

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

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