Question

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

只使用一个文件输入（在几个没有问题的项目中使用），效果很好。

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

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

我创建表（ok）

<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部分（ok）

$(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>

经过这两项修改后，它可以正常使用

表

1 个答案: