使用Ajax和Apache CXF上传文件

我不太熟悉Ajax和客户端应用程序（我主要是服务器端开发人员）。我需要添加一个简单的HTML页面，一个上传文件并将其传递给Apache-CXF服务的按钮。使用Ajax和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>

最后的JavaScript代码，做AJAX调用：

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

}

这可能是一个非常基本的问题（因为我很喜欢没有完全理解它...） - 我会感谢您的帮助！

非常感谢

来源

2014-06-29 Carmel Baumel-Ezra

大问题，非常详细和明确的。 – alkis

你有没有找到解决方案？如果是，请提供答案。我对这个问题的性质非常感兴趣。 – alkis

不幸的不是。我现在放弃了它，因为它对我们来说不是那么重要，也没有理由花时间在它上面。如果您发现解决方案，我会非常感激。谢谢:) –

contentType: false,

试试上面。这将强制jQuery生成contentType标题，并且它将包含边界信息。如果你闻，你是向服务器发送HTTP消息，你会看到，现在你要发送这样的事情

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

来源

2014-07-01 04:50:06 alkis

感谢您的回应。我试了一下，得到：**'错误不支持的媒体类型** –

关注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,

来源

2016-03-30 13:40:43

使用Ajax和Apache CXF上传文件

回答

相关问题