Ajax File Upload

You might have seen Ajax File Uploading in some sites. The basic idea is to upload a file without refreshing the page. Some sites go even further by providing details on how much percentage is uploaded,etc. It is very easy to achieve this effect using javascript.

First off,I did not like using the term 'Ajax' when describing this method. But there is no other word that can be used. And this method fits within my definition of Ajax - "Sending or receiving data from the server without refreshing the page.". So I will name this method Ajax file upload.

Theory

The basic idea behind this effect is to redirect a form's action into a hidden IFrame. So,when the form with the file field is submitted,the result will appear in a IFrame. But since it is hidden,the user will not see it. This effect is achieved using the 'target' attribute of the Form tag.

See the small squire? That is the IFrame. Typically,it will be hidden.

Code

(X)HTML

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
<input name="file" id="file" size="27" type="file" /><br />
<input type="submit" name="action" value="Upload" /><br />
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

JavaScript

function init() {
	document.getElementById('file_upload_form').onsubmit=function() {
		document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe
	}
}
window.onload=init;

PHP

This should be inupload.php- the action of the form.

<?php
include('../../../common.php');
upload('file','.','txt,jpg,jpeg,gif,png');

The code to upload the file must be given here. I used one of mycustom functions to upload the file- it is not a native PHP function. Needless to say,this is not restricted to PHP - you can use any server side language here.

Update: Part two -Ajax File Upload Response Handling

//Some funny comments:

• Contact Vishal007 ?4 years ago

  what is common.php??

  12

  ?

  Reply

  ?

  Share ?
  • HellContact Vishal007 ?3 months ago

    that's your ass where you put the php code to actually upload the file.

    ?

    Reply

    ?

    Share ?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!