Question

我试图发送两个PDF文件）最初只是一个）使用javascript（jquery与否）通过HTML表单，我必须在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时，列表＆＃34; items＆＃34;大小为0，并进入异常。

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

现在客户端没有正确上传文件。

作为旁注，我上传的文件将由控制器中的pdfbox或google ocr使用。

提前致谢！

Answer 1

使用下一个代码：

JS： function 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

1 个答案: