Upload file using Ajax and Apache CXF
Question
I'm not so familiar with Ajax and client side application (I'm mainly a server side developer). I need to add to a simple HTML page, a button that uploads a file and sens it to a Apache-CXF service.
I don't succeed to make this "hand shake" between client and server. I get:
java.lang.RuntimeException: org.apache.cxf.interceptor.Fault: Couldn't determine the boundary from the message!
This is the definition of the service in 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
}
}
This is the HTML file:
<!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>
And finally the JavaScript code that does the AJAX call:
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
}
});
}
It might be really basic issue (because I'm really not fully understand it...) - I'll appreciate your help!
Thanks a lot
2 answers
solution1
0 2014-07-01 04:50:06
contentType: false,
Try the above. This will force jQuery to generate the contentType headers and it will include the boundary information. If you sniff the http message that you are sending to the server you will see that now you are sending something like this
Content-Type: multipart/form-data; boundary=???
solution2
0 2016-03-30 13:40:43
Follow alkis answer and use FormData object (more here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects ) to pass the file, that worked for me:
var fileData = new FormData();
fileData.append('file', file);
And in jquery ajax method:
data: fileData,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.