File Upload in PHP



=================Code for File Upload=================

<html>
<head>
<title> File Upload </title>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js">
</script>
<script type="text/javascript">

function readURL(input)
{ //console.log(input);
          if(input.files)
{
            var reader = new FileReader();

                reader.onload = function (e)
{
                $('#inbuilt')
                        .attr('src', e.target.result)
                        .width(400)
                        .height(300);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

</script>
<style>   <!-- CSS for multiple div -->
.wrap_div{display:flex;}
.red {color:#FF0000;}
.green {color:#00FF00;}
</style>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
    <input type="FILE" id="id_file"  onchange="readURL(this);" name="fu"><br><br>
         <img id="inbuilt" hight="300" width="300" src="https://www.elementstark.com/woocommerce-extension-demos/wp-content/uploads/sites/2/2016/12/upload.png" alt="your image" /><br><br>   <!-- Display Image on Choose File -->
        <input type="submit" name="submit" value="Upload File">
    </form>
</body>
</html>
<?php
if(isset($_FILES['fu']))
{
$f_name = $_FILES['fu'][name];
$f_size = $_FILES['fu'][size];
$tmp_name = $_FILES['fu'][tmp_name];
$f_type = $_FILES['fu'][type];

$file_ext = strtolower(end(explode('.',$f_name))); // 'end' - Points to last object...
$def_ext = array("jpeg","jpg","png");

if(in_array($file_ext,$def_ext))
{
if($f_size < 4097152)
{
move_uploaded_file($tmp_name,"C:\wamp\www/".$f_name); // Store your uploaded file in www folder which is place in wamp...
echo "<br>
<table border='2'>
<tr><th>
<div class='wrap_div'>
<div class='green'> Successfully Upload </div>
<div class='red'>&nbsp;".$f_name."&nbsp;</div>
<div class='green'>file</div>
</div>
</th></tr>
</table>";
}
else
echo "<br><div class='red'>File size must be upto 4MB !!!</div>";
}
else
echo "<br><div class='red'>Only jpg, jpeg and png can be upload !!!</div>";
}
?>


Click here for Graphical Tutorial

This is the pictorial view of steps taken in practical...

Step-1:Choose File.

Step-2:Click Open Button.

Step-3:Upload your file with only image format(jpg,jpeg,png).

Step-4:Your file now successfully uploaded.

Step-5:Your file stored into "C:\wamp\www/" path.

Comments

:skin :include name='super.defaultAdUnit'/>