使用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上傳文件

回答

相關問題