Tuesday, 16 February 2016

How to upload document file using Ajax with PHP :

04:00

How to upload   document file using  Ajax with PHP :

(1)write  code for   upload.html   file :
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
     <input   type="file"  size="60"   name="myfile">
                 <input type="submit" value="Ajax File Upload">
 </form>


 <div id="progress">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>
   
<div id="message"></div>


<script>
$(document).ready(function()
{

                var options = {
    beforeSend: function()
    {
                $("#progress").show();
                //clear everything
                $("#bar").width('0%');
                $("#message").html("");
                                $("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete)
    {
                $("#bar").width(percentComplete+'%');
                $("#percent").html(percentComplete+'%');

   
    },
    success: function()
    {
        $("#bar").width('100%');
                $("#percent").html('100%');

    },
                complete: function(response)
                {
                                $("#message").html("<font color='green'>"+response.responseText+"</font>");
                },
                error: function()
                {
                                $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

                }
    
};

     $("#myForm").ajaxForm(options);

});

</script>
</body>


</html>

(2)Now   write  code for  upload.php file:

<?php
$output_dir = "uploads/";


if(isset($_FILES["myfile"]))
{
                //Filter the file types , if you want.
                if($_FILES["myfile"]["error"] > 0)
                {
                  echo "Error: " . $_FILES["file"]["error"] . "<br>";
                }
                else
                {
                                //move the uploaded file to uploads folder;
                move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
   
                 echo "Uploaded File :".$_FILES["myfile"]["name"];
                 
                }

}
?>


 Output :


Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comments:

Post a Comment

PHP Training Mumbai, PHP MySQL Training Mumbai, PHP Course Mumbai, PHP Institute Mumbai

 

© 2013 PHP TRAINING IN MUMBAI BY OM SIR . All rights resevered. Designed by OM SIR

Back To Top