通过 ajax 将文件 (PDF) 发送到 JSP Servlet

Question

我正在尝试使用 javascript（jquery 或不发送）通过 HTML 表单发送两个 PDF 文件），我必须在一个文件中接收这两个文件JSP 页面的控制器（使用 Spring）并对这两个文件做一些事情。

现在我一直在尝试一些已经在 SO 中发布的答案，但我无法让它正常工作。

我的HTML文件

<form id="searchForm">
                <table class=rightAlignColumns>
                    <tr>
                        <td><label for="File1"><spring:message code='File1' />:</label></td>
                        <td><input id="File1" type="file" name="File1" /> </td>

                        <td><label for="file2"><spring:message code='File2' />:</label></td>
                        <td><input id="file2" type="file" name="file2" /> </td>
                    </tr>   
                </table>
                    <br/>
                    <input type="submit" value="<spring:message code='Btn' />" />
            </form>

我的javascript

var fd = new FormData();    
    alert(document.getElementById('File1').files.length);
    fd.append( 'File1', document.getElementById('File1').files[0] );
//  fd.append( 'File2', document.getElementById('File2').files[0]);
    $.ajax({
    url:'myurl.json',
      data: fd,
      cache:false,
        processData:false,
        contentType:false,
      type: 'POST',
      success: function(data){
//      alert(data);
      }
    });

在控制器上我正在做 this other post 所说的。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    try {
        List<FileItem> items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
        for (FileItem item : items) {
            if (item.isFormField()) {
                // Process regular form field (input type="text|radio|checkbox|etc", select, etc).
                String fieldName = item.getFieldName();
                String fieldValue = item.getString();
                // ... (do your job here)
            } else {
                // Process form file field (input type="file").
                String fieldName = item.getFieldName();
                String fileName = FilenameUtils.getName(item.getName());
                InputStream fileContent = item.getInputStream();
                // ... (do your job here)
            }
        }
    } catch (FileUploadException e) {
        throw new ServletException("Cannot parse multipart request.", e);
    }

    // ...
}

问题我认为是在javascript，因为当代码进入Controller时，列表"items"的大小为0，并进入异常。

预期结果是用户将 PDF 文件加载到表单中，点击提交并 ajax 将文件发送到服务器（控制器），正确执行操作并发回结果。

目前客户端没有正确上传文件。

附带说明一下，我上传的文件将由控制器中的 pdfbox 或 google ocr 使用。

提前致谢！

Answer 1

它使用下一个代码工作：

JS: 函数 doAjax() {

// Get form
var form = $('#id_form')[0];
var data = new FormData(form);
$.ajax({
    type: "POST",
    enctype: 'multipart/form-data',
    url: "controller/myMethod",
    data: data,
    processData: false, //prevent jQuery from automatically transforming the data into a query string
    contentType: false,
    cache: false,
    dataType:'json',
    success: function (e) {
        $("#result").text(data);
        alert("Success");
    },
    error: function (e) {
        $("#result").text(e.responseText);
        alert("Error");
    },
    complete: function () {
        // Handle the complete event
        alert("Complete");
      }
});
}

在控制器上

@RequestMapping(value = "/uploadfile", method = RequestMethod.POST)
public String uploadFileMulti(@RequestParam("file") MultipartFile file,HttpServletRequest request) {
    try {
        //storageService.store(file, request);
        System.out.println(file.getOriginalFilename());
        return "You successfully uploaded " + file.getOriginalFilename();
    } catch (Exception e) {
        return "FAIL!";
    }
}

我的HTML文件

 <form class="form-horizontal" method="POST" enctype="multipart/form-data" id="id_form">
    <label for="file">File:</label>
    <input id="file" type="file" name="file" />
</form>

通过 ajax 将文件 (PDF) 发送到 JSP Servlet

Sending a File (PDF) through ajax to a JSP Servlet

javascript

ajax

spring

jsp

form-data