使用Ajax和Apache CXF上传文件

Question

我对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
        }
    });

}

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

非常感谢

Answer 1

contentType: false,

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

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

Answer 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,

使用Ajax和Apache CXF上传文件

问题描述

2 个解决方案

解决方案1
0 2014-07-01 04:50:06

解决方案2
0 2016-03-30 13:40:43

使用Ajax和Apache CXF上传文件

问题描述

2 个解决方案

解决方案1 0 2014-07-01 04:50:06

解决方案2 0 2016-03-30 13:40:43

解决方案1
0 2014-07-01 04:50:06

解决方案2
0 2016-03-30 13:40:43