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>
<!--
<form id="myForm" name="myForm" target="myIFrame" method="post" action="SaveFile.aspx"
enctype="multipart/form-data">
</form>
<!--
<form id="form1" runat="server">
<!--
<input type="file" id="myFile" name="myFile" runat="server" />
<!--
<input type="button" value="Upload File" />
<!--
<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() {
var theForm = document.forms['myForm'];
if (!theForm)
theForm = document.myForm;
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
var theFile = document.getElementById("myFile");
theForm.appendChild(theFile);
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.