[英]Upload file using Ajax and Apache CXF
我對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
}
});
}
這可能是一個非常基本的問題(因為我真的不完全了解...)-感謝您的幫助!
非常感謝
contentType: false,
嘗試以上。 這將強制jQuery生成contentType標頭,並將包含邊界信息。 如果您嗅探要發送到服務器的http消息,您將看到現在正在發送類似這樣的消息
Content-Type: multipart/form-data; boundary=???
遵循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,
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.