Upload files via traditional form submission:
-
<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
-
<h1 >Test Passed Rest Interface Upload File </h1>
-
<p >Specify the file name: <input type ="text" name="filename" /></p>
-
<p >Upload file: <input type ="file" name="file" /></p>
-
<p >Keyword 1: <input type ="text" name="keyword" /></p>
-
<p >Keyword 2: <input type ="text" name="keyword" /></p>
-
<p >Keyword 3: <input type ="text" name="keyword" /></p>
-
<input type ="submit" value="upload"/>
-
</form>
However, traditional form submissions can cause pages to refresh, but in some cases, we don't want pages to refresh, in which case we all request them using Ajax:
-
$.ajax({
-
url : "http://localhost:8080/STS/rest/user",
-
type : "POST",
-
data : $( '#postForm').serialize(),
-
success : function(data) {
-
$( '#serverResponse').html(data);
-
},
-
error : function(data) {
-
$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
-
}
-
});
As mentioned above, the form form form can be serialized with $('#postForm').serialize() to pass all parameters from the form to the server.
However, in this way, only general parameters can be passed, and the file stream of the uploaded file cannot be serialized and passed.
But now mainstream browsers are starting to support an object called FormData, which makes it easy to upload files using Ajax.
About FormData and its usage
What is FormData?Let's take a look at the introduction on Mozilla.
XMLHttpRequest Level 2 adds a new interface, FormData. With the FormData object, we can use JavaScript to simulate a series of form controls using key-value pairs. We can also use XMLHttpRequest's send() Method submits this "form" asynchronously. The best advantage of using FormData over normal ajax is that we can upload a binary asynchronously.
|
Here's just one way to initialize FormData through the from form
<form enctype="multipart/form-data" method="post" name="fileinfo">
-
var oData = new FormData(document.forms.namedItem("fileinfo" ));
-
oData.append( "CustomField", "This is some extra data" );
-
var oReq = new XMLHttpRequest();
-
oReq.open( "POST", "stash.php" , true );
-
oReq.onload = function(oEvent) {
-
if (oReq.status == 200) {
-
oOutput.innerHTML = "Uploaded!" ;
-
} else {
-
oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
-
}
-
};
-
oReq.send(oData);
Using FormData, make Ajax requests and upload files
JQuery is used here, but older versions of JQuery, such as 1.2, are not supported. Better use version 2.0 or later:
-
<form id= "uploadForm">
-
<p >Specify the file name: <input type="text" name="filename" value= ""/></p >
-
<p >Upload file: <input type="file" name="file"/></ p>
-
<input type="button" value="upload" onclick="doUpload()" />
-
</form>
-
function doUpload() {
-
var formData = new FormData($( "#uploadForm" )[0]);
-
$.ajax({
-
url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
-
type: 'POST',
-
data: formData,
-
async: false,
-
cache: false,
-
contentType: false,
-
processData: false,
-
success: function (returndata) {
-
alert(returndata);
-
},
-
error: function (returndata) {
-
alert(returndata);
-
}
-
});
-
}