使用 Ajax 和 Apache CXF 上传文件答案

【问题标题】：Upload file using Ajax and Apache CXF使用 Ajax 和 Apache CXF 上传文件
【发布时间】：2014-06-29 10:20:02
【问题描述】：

我对 Ajax 和客户端应用程序不太熟悉（我主要是服务器端开发人员）。我需要在一个简单的 HTML 页面中添加一个按钮，用于上传文件并将其发送到 Apache-CXF 服务。

我没有成功在客户端和服务器之间进行这种“握手”。我明白了：

java.lang.RuntimeException: org.apache.cxf.interceptor.Fault: 无法从消息中确定边界！

这是服务在Java中的定义：

@Path("/")
@Produces(MediaType.TEXT_PLAIN)
@Getter
@Setter
@CrossOriginResourceSharing(allowAllOrigins = true)
public class NLPRestService {

    @POST
    @Path("/uploadPosRulesFile")
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public void uploadFile(@Multipart(value="file", type="text/plain" ) InputStream file) {
        //Here will be the code that handles the file content - I'll know what do with it once I'll succeed to get here
    }
}

这是 HTML 文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>My-App</title>
        <script type="text/javascript" src="js/jquery/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/jquery/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="js/parseText.js"></script>
        <script type="text/javascript" src="js/uploadPosRules.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <link href="bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div style="padding: 20px;">
            <h1>my-app</h1>
            <form id="uploadPosRulesform" >
                <div style="width: 700px;">
                    Upload new POS Rules File <input id="fileupload" type="file" name="file" /> 
                    <input  id="submit" value="upload POS RULE file" type="button"  onclick="uploadFiles()" />
                </div>
            </form>
            <!-- Here comes another form that do another thing - irrelevant  -->
            <form id="form">
                ...
            </form>
        </div>
    </body>
</html>

最后是执行 AJAX 调用的 JavaScript 代码：

function uploadFiles() {
    event.stopPropagation(); // Stop stuff happening
    event.preventDefault(); // Totally stop stuff happening

    // START A LOADING SPINNER HERE

    // Create a formdata object and add the files
    $.ajax({
        url : '../services/nlpService/uploadPosRulesFile',
        type : 'POST',
        data: { file: $('#fileupload').val()},
        cache : false,

        dataType : 'text/plain',

        processData : false, // Don't process the files
        contentType: 'multipart/form-data',
        //contentType : false, // Set content type to false as jQuery will tell the server its a query string request
        success : function(data, textStatus, jqXHR) {
            alert(data);
            if (typeof data.error === 'undefined') {

            } else {
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            // Handle errors here
            console.log('ERRORS: ', jqXHR, textStatus, errorThrown);
            $('#alert').css('display', 'block');
            $('#alert').html(jqXHR.response);
            // STOP LOADING SPINNER
        }
    });

}

这可能是一个非常基本的问题（因为我真的不完全理解它......） - 非常感谢你的帮助！

非常感谢

【问题讨论】：

好问题，非常详细和清晰。
您找到解决方案了吗？如果是，请提供答案。我对问题的性质非常感兴趣。
很遗憾没有。我暂时放弃了它，因为它对我们来说并不重要，也不能证明我们花在它上面的时间是合理的。如果您找到解决方案，我将不胜感激。谢谢:)

标签： java cxf jax-rs jquery-file-upload multipartform-data

【解决方案1】：

contentType: false,

试试上面的。这将强制 jQuery 生成 contentType 标头，并将包含边界信息。如果您嗅探您发送到服务器的 http 消息，您将看到现在您正在发送类似这样的内容

Content-Type: multipart/form-data; boundary=???

【讨论】：

感谢您的回复。我试了一下，得到：error Unsupported Media Type

【解决方案2】：

按照 alkis 的回答并使用 FormData 对象（更多：https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects）来传递文件，这对我有用：

var fileData = new FormData();
fileData.append('file', file);

在jquery ajax方法中：

data: fileData,

【讨论】：