Introduction
Currently, there's no direct way to upload files in a web page without refreshing the page. If you have an interactive page that is AJAX-enabled, you would like to support uploading files in a way similar to AJAX behavior.
Unfortunately, the
XMLHttpRequest object doesn't support uploading files; therefore, I am trying to upload files using a workaround.Background
First of all, before diving in to the subject, let's review some basic concepts of HTML forms. If you are already familiar with HTML forms, you can skip this section.
Basically, there are two main ways to submit a form. The first one is by clicking on an input control of type
submit. Like the following:<input type="submit" id="mySubmitButton" name="mySubmitButton" value="Submit Form" />
The other way is by calling a JavaScript code that submits the form, like the following:
function submitMyForm() {
var theForm = document.forms['myForm'];
theForm.submit();
}
A form in HTML has several attributes that indicate how the form should be submitted; the following are some of these attributes:
action: it's a path to a web page to which the form should be submittedmethod: the method of submitting the form (possible values include: POST, GET ...etc.)enctype: the way the submitted data should be encryptedtarget: the frame in which the form should be submitted
Once a page is submitted, either by clicking on the Submit button or by calling a JavaScript that submits the form, the browser checks the
action of the form to be submitted, and then it will load the action -web page- sending it the contents of the form, encrypted using the encryption method specified in the encrypt attribute.Prepare the Page
Two pages are going to be used to implement this technique. The first one will hold the HTML content, including the file upload control. The second one will contain the server-side code to save the file to the server.
Let's start by adding controls to the first page. Of course, we'll need to add a file upload control. In addition, we'll add an iFrame and a form. The HTML body of the page will look like this:
<body> <!-- This is the form that we added --> <form id="myForm" name="myForm" target="myIFrame" method="post" action="SaveFile.aspx" enctype="multipart/form-data"> </form> <!-- This is the form which is added by default --> <form id="form1" runat="server"> <!-- This is the file upload control --> <input type="file" id="myFile" name="myFile" runat="server" /> <!-- This is a normal button that will be used to the JavaScript function to upload the file --> <input type="button" value="Upload File" /> <!-- This is an iFrame in which the form will be submitted --> <iframe style="display: none;" id="myIFrame" name="myIFrame"></iframe> </form> </body>
Note that we added the form outside the form that was added by default to the page. We also set the
action property to the second page URL, as mentioned earlier. The iFrame style is set to keep it hidden so we won't notice it when the file is being uploaded.JavaScript
Now, we want to let the button call a JavaScript to submit the form and upload the file. In order to do that, we'll add a JavaScript function to the page and call it
uploadFile. We'll also call this function at the button's click event. The following is the JavaScript function:<script type="text/javascript">
function uploadFile() {
// get the form that we added
var theForm = document.forms['myForm'];
// some browsers don't recognize the line above,
// so this line is added for browser compatability
if (!theForm)
theForm = document.myForm;
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
// get the file upload control
var theFile = document.getElementById("myFile");
// add the file upload control inside the form
theForm.appendChild(theFile);
// submit the form
theForm.submit();
}
}
</script>
Save the File
The second page, SaveFile.aspx, contains the code that saves the file on loading, as follows:
protected void Page_Load(object sender, EventArgs e)
{
Request.Files["myFile"].SaveAs("path on the server to save the file");
}
Compatible Browsers
This technique was tested on Microsoft Explorer 8 and Google Chrome.
No comments:
Post a Comment