I've used the code bellow to upload a file to server
asynchronously:
HTML:
<form id="file_upload" action="UploadFile.ashx"
target="upload-target" method="post" enctype="multipart/form-data"
onsubmit="javascript:return uploadClicked();">
<input type="file"
id="newFile" name="newFile" />
<input type="submit"
/>
<iframe id="upload-target"
name="upload-target"></iframe>
</form>
After the submit button clicked, the function uploadClicked() will
be fired:
function uploadClicked() {
if (condition == true)
return true; //the form will submit
else
return false;
}Now the generic handler UploadFile.ashx will
save the file and return the result:
if (context.Request.Files.Count > 0)
{
context.Request.Files["newFile"].SaveAs(HttpContext.Current.Server.MapPath("/Images/myFile.png"));
response.Write("DONE");
}
else
{
response.Write("FAILED");
}
This works well and the result will be showing in the iframe
tag.
Is there anyway to get the result ("DONE" or
"FAILED") in client-side like this ?
function uploadFinished()
{
if ( response == "DONE" )
{
// show the result
}
else
{
// show error
}
}
Please help me doing this without using JQuery.
Thanks in advance.
Royce Roy
15-Jan-2015You could use the XHR2 FormData object to upload the file to the server asynchronously and retrieve the response from the server handler:
function uploadClicked() {
var xhr = new XMLHttpRequest();
// We are submitting the form asynchronouslyvar fd = new FormData();
var file =document.getElementById('newFile');
fd.append(file.name, file.files[0]);
var form =document.getElementById('file_upload');
xhr.open(form.method,form.action);
xhr.onreadystatechange = function () {
if (xhr.readyState== 4 && xhr.status == 200) {
//xhr.responseText will contain the response from the server
alert(xhr.responseText);
}
};
xhr.send(fd);
return false;
}