Upload files without reloading the webpage and with process meter including demo, codes for download

under license GNU GPL.Smile

Demo: click here

download: click here

manual: click here

It uses php, javascript. The explaination in details is as below:

The basic idea is to target the action of the form to a hidden iframe. When the form is submitted, theoutcome is shown in iframe. Since it’s hidden, the user can’t see it. This function is realized by the”target” property of the form.

The code on the webpage:

<form enctype=”multipart/form-data” id=”upload_files_form” target=”upload_target” method=”post” action=”upload.php”>
   <input type=”hidden” name=”MAX_FILE_SIZE” value=”10000000″>  
   <input name=”upfile[]” type=”file”  />
   <button name=”submit” type=”submit”>click here to upload files</button> 
   <iframe id=”upload_target” name=”upload_target” style=” display:none;” ></iframe>
</form>

The code on upload.php:
//here ud_pics.php includes a class to upload files
require_once(“ud_pics.php”);
$ud = new UD_PICS();  
$upload = $ud->upload_pics(”,”);

Add the code as below on upload.php. When the code above is finished, the javascript function stopUpload() on the mainpage will be called. The value of $outcome will be returned to the function stopUpload(). Here the value of $outcome can be 0 or 1. If it is a string, it will have error. So if more information about uploaded files, we need to get the content of iframe now.  

<script language=”javascript” type=”text/javascript”>
  window.top.window.stopUpload(<?php echo $outcome; ?>);
</script>

Related link:
How to get the content from < iframe> with javascript

Leave a Reply

Your email address will not be published. Required fields are marked *