Writing CSS:
.loader{
background:url('/images/loader.gif');
text-align:center;
}
You can use any ajax loader image.
Writing the form:
<html>
<head>
<title>Ajax uploader</title>
<link type="text/css" src="css/style.css" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
$('myform').addEvent('submit', function(e) {
//Prevents the default submit event from loading a new page.
e.stop();
//Empty the log and show the spinning indicator.
var log = $('loading').empty().addClass('loader');
//Set the options of the form's Request handler.
//("this" refers to the $('myform') element).
this.set('send', {onComplete: function(response) {
log.removeClass('loader');
log.set('html', response);
}});
//Send the form.
this.send();
});
});
</script>
</head>
<body>
<div id="loading">
</div>
<form action="upload.php" method="post" enctype="multipart/form-data" id="myform">
Browse: <input type="file" name="upload_file" />
<input type="submit" value="Upload" id="submit" name="submit" />
</form>
</body>
</html>
Write php uploading script:
<?
$file_path="/home/website/www/upload/";
if(!empty($_REQUEST['submit']) && !empty($_FILES['upload_file'])){
if(move_file_upload($_FILES['upload_file']['tmp_name'],$file_path.$_FILES['upload_file']['name'])){
echo 'File has been uploaded';
}
else{
echo 'Unable to upload file.';
}
}
?>
Don't forget to write your comments. Thanks.
Posts
No comments:
Post a Comment