Click here to Skip to main content
Click here to Skip to main content

AJAX-Like File Uploading

, 11 Apr 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
This article explains how to provide the feature of uploading files to a web page, imitating AJAX behavior.

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 submitted
  • method: the method of submitting the form (possible values include: POST, GET ...etc.)
  • enctype: the way the submitted data should be encrypted
  • target: 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mohammad Abu-Ali
Software Developer (Senior) Software Café
Jordan Jordan

Comments and Discussions

 
Questionhow to know the job was finished Pinmemberbabydragoner1-Jul-13 0:25 
AnswerRe: how to know the job was finished PinmemberMohammad Abu-Ali4-Nov-13 1:25 
AnswerGood but not working in I.E. 7 PinmemberMohamad Kaifi12-Apr-10 4:01 
GeneralRe: Good but not working in I.E. 7 PinmemberMohammad Abu-Ali23-Jan-11 2:14 
GeneralRe: Good but not working in I.E. 7 PinmemberBrian C Hart22-Sep-11 13:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150224.1 | Last Updated 11 Apr 2010
Article Copyright 2010 by Mohammad Abu-Ali
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid