How to Upload Files Using Ajax & PHP

Written by ian low
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Upload Files Using Ajax & PHP
AJAX techniques enable a user to continue browsing a Web page while an upload is taking place. (upload buton image by Attila Toro from Fotolia.com)

While a file is being uploaded to a website using HTML and PHP, the Web page cannot refresh until the upload has completed. This could take some time, particularly if it is a large file. A Web developer can avoid this by using AJAX (Asynchronous JavaScript and XML) techniques to enable the user to continue using the Web page while the file upload is taking place.

Skill level:
Easy

Other People Are Reading

Things you need

  • Website with PHP installed
  • Notepad Text Editor
  • FTP upload software

Show MoreHide

Instructions

  1. 1

    Create a blank text document on your computer desktop and rename it "filesave.php." Copy and paste the code below into "filesave.php," and then select "File|Save." This PHP script will receive the file from an HTML form post and save it into the current directory on the Web server.

    <?php

    $upload_result = 0;

    $target_folder = "./";

    $target_path = $target_folder.basename( $_FILES['uploadfile']['name']);

    if(@move_uploaded_file($_FILES['uploadfile']['tmp_name'], $target_path)) {

      $upload_result = 1;
    

    }

    ?>

  2. 2

    Create a blank text document on your computer desktop and rename it "fileupload.html." Open "fileupload.html" in Notepad and copy and paste the following code. Change "yoursite.com" to your website domain. This code uses the asynchronous technique of "enclosing" the filesave.php response inside the iframe "iframe_target," so that the website does not need to refresh.

    <html>

    <head>

    </head>

    <body>

    <div id="upload_status"></div>

    <form action="http://www.yoursite.com/filesave.php" method="post" enctype="multipart/form-data" target='iframe_target' >

    Please enter a filename:

    <input name="uploadfile" type="file" />

    <input type="submit" value="Upload" />

    </form>

    <iframe id="upload_target" name="iframe_target" style="width:0;height:0"></iframe>

    </body>

    </html>

  3. 3

    Upload "filesave.php" and "fileupload.php" to the root directory of your website, using FTP software.

  4. 4

    Open your browser at "http://www.yoursite.com/fileupload.html" where "yoursite.com" is your website domain name. Click on "browse ..." and select a large file such as a sample image file, and then click on "upload." The upload will complete when the browser displays "Done" at the bottom of the window. Check that the file has successfully uploaded, using your FTP software.

  1. 1

    Copy and paste the following code above the "</head>" end tag in "fileupload.html" on your desktop. The "begin_upload" function uses the document element "upload_status" to display the "loading ..." message. The "end_upload" function will be called by the PHP response after it has successfully saved the uploaded file.

    <script>

    function begin_upload(){

    document.getElementById('upload_status').innerHTML = 'loading...';

    return true;

    }

    function end_upload(result){

        if (result == 1){
    
         document.getElementById('upload_status').innerHTML ="The file was successfully uploaded.";
    
     }      else {
    
       document.getElementById('upload_status').innerHTML = "An error occurred during upload.";
    
    }
    
     return true;
    

    }

    </script>

  2. 2

    Insert the string "onSubmit='begin_upload();'" after the string "target='iframe_target'" inside the "form action" tag, so that the entire tag appears as below. This enables the "begin_upload()" function to be called when the user clicks on the "upload" button. Select "File|Save."

    <form action="http://www.yoursite.com/filesave.php" method="post" enctype="multipart/form-data" target='iframe_target' onSubmit='begin_upload();' >

  3. 3

    Press "Alt+TAB" to select "filesave.php" in Notepad. Copy and paste the following two lines at the top before the "<?php" line, so that the PHP script uses a JavaScript script function called "init()."

    <script type="text/javascript">

    function init() {

  4. 4

    Copy and paste the following lines below the bottom line "?>," so that the PHP script outputs the file saved result value in the "init()" function. Select "File|Save."

    top.end_upload(<?php echo $upload_result; ?>);

    }

    window.onload=init;

    </script>

  5. 5

    Upload "filesave.php" and "fileupload.html" to your website, overwriting the previous versions.

  6. 6

    Open your browser at "http://www.yoursite.com/fileupload.html" where "yoursite.com" is your website domain name. Click on "browse ..." and select a large file and then click on "upload." The "loading ..." message will now display during upload, and on completion, the "successfully uploaded" message will display.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.