PHP File Upload, Progress Bar, Restrict File Types

I recently decided to improve my file upload utility. So I googled for suggestions out there in the wild. Ouch, there is a lot of bad crap! 

So I decided to put together my own based upon several sites and publish it here. It is for the most part a version of Talkerscode.com file upload with jquery and PHP.

It requires: jquery.js and jquery.form.js

I’ll concentrate on the form, the action and the JS files.

The Upload Form with a Progress Bar

<form action="upload_file.php"id="myForm" name="frmupload" method="post" enctype="multipart/form-data">
     <input class = "btn btn-primary" type="file" id="upload_file" name="upload_file" />
    <input class = "btn btn-primary" type="submit" name='submit_zip' value="Submit" onclick='upload();'/>
</form>
<div class='progress' id="progress_div">
<div class='bar' id='bar1'></div>
<div class='percent' id='percent1'>0%</div>
</div>

The Action, upload_file.php

1. $allowedExts = array("gif", "jpeg", "jpg", "png", "zip");

   allows you to restrict the type of upload

2. $temp = explode(".", $_FILES["upload_file"]["name"]);

   returns an array of strings of the file name and the file extension for the file upload $_FILES array “upload_file” which gets its name from

   <input class = "btn btn-primary" type="file" id="upload_file" name="upload_file" />

3. $extension = end($temp);

   gets the file extension

4. Then the rest of the code is just if, and and else PHP to upload the file or tell the user that the file is invalid

<?php $allowedExts = array("gif", "jpeg", "jpg", "png", "zip"); 
$temp = explode(".", $_FILES["upload_file"]["name"]); 
$extension = end($temp); 

if (isset($_POST['submit_zip']) && in_array($extension, $allowedExts)) {
                $uploadfile=$_FILES["upload_file"]["tmp_name"];
                $folder="upload/";
                move_uploaded_file($_FILES["upload_file"]["tmp_name"], $folder.$_FILES["upload_file"]["name"]);
                echo " Your uploaded file is: " . $_FILES["upload_file"]["name"];
                exit();
              }else {
  echo "You have tried to upload an Invalid File Type. It did not upload";
}

Then the JavaScript function for the Progress Bar

function upload()
{
  var bar = $('#bar1');
  var percent = $('#percent1');
  $('#myForm').ajaxForm({
    beforeSubmit: function() {
      document.getElementById("progress_div").style.display="block";
      var percentVal = '0%';
      bar.width(percentVal);
      percent.html(percentVal);
    },

    uploadProgress: function(event, position, total, percentComplete) {
      var percentVal = percentComplete + '%';
      bar.width(percentVal);
      percent.html(percentVal);
    },
    
    success: function() {
      var percentVal = '100%';
      bar.width(percentVal);
      percent.html(percentVal);
    },

    complete: function(xhr) {
      if(xhr.responseText)
      {
        document.getElementById("output_image").innerHTML=xhr.responseText;
      }
    }
  }); 
}

Style the Progress Bar

.progress 
{
  display:none; 
  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%; 
}