Uploading Images Using AJAX In HTML5

In a post that was published some years ago, I explained how to upload an image using AJAX. But, it is an old trick when HTML5 was not standardized.

But, now browsers have evolved and almost every person in the world has an HTML5 supported browser. Besides, the old trick used a JS file which is about 15KB. If we used HTML5 mechanism instead, then you can save about 14KB.

We use FormData object in JS to make the multipart/form-data, then the file object retrieved from the input element :

var data = new FormData();
var files = $("input[type=file]")[0].files;

// Append files infos (object)
$.each(files, function(i, file) {
    data.append('file-'+i, file);
});
$.ajax(

The code uses jQuery. If you want to use plain JS, then use this :

var data = new FormData();
var files = document.getElementById("inputfile").files;

// Append files infos (object)
for(i = 0;i < files.length;i++){
    data.append('file-'+i, files[i]);
};

Each file selected by the user is inserted into the FormData as “file-” followed by the index number of file. That is, if two files are selected, then the files is sent as “file-0” and “file-1”.

Here is the server code in PHP where we access the uploaded files :

<?php
function getMIMEType($filename){
  $finfo = new finfo;
  return $finfo->file($filename, FILEINFO_MIME_TYPE);
}
function rand_string($length) {
  $str="";
  $chars = "subinsblogabcdefghijklmanopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  $size = strlen($chars);
  for($i = 0;$i < $length;$i++) {
    $str .= $chars[rand(0,$size-1)];
  }
  return $str;
}

$supported_files = array("image/jpg", "image/png", "image/gif", "image/bmp", "image/jpeg", "image/bmp");

if(count($_FILES) != 0 and $_SERVER['REQUEST_METHOD'] == "POST"){
  for($i = 0;$i < count($_FILES);$i++){
    $name = $_FILES['file-' . $i]['name'];
    $size = $_FILES['file-' . $i]['size'];
    $tmp  = $_FILES['file-' . $i]['tmp_name'];
    $type = getMIMEType($tmp);
    
    echo "<h3>File # ". ($i+1) ."</h3>";
    if(in_array($type, $supported_files)){
      /**
       * Max size is 1 MB = 1024 KB = 1024 * 1024 Bytes
       */
      if($size < (1024 * 1024)){
        $upload_file_name = time() . "-" . rand_string(4);
        if(move_uploaded_file($tmp, __DIR__ . "/uploads/$upload_file_name")){
          echo "File Name : $name";
          echo "<br/>File Temporary Location : $tmp";
          echo "<br/>File Size : $size";
          echo "<br/>File Type : $type";
          echo "<br/>Image : <img style='margin-left:10px;' src='uploads/$upload_file_name'>";
        }else{
          echo "Uploading Failed.";
        }
      }else{
        echo "Files must have maximum size of 1 MB";
      }
    }else{
      echo "Invalid Image file format.";
    }
  }
}else{
  echo "Please select an image.";
  exit;
}
?>

We use two functions, getMIMEType() and rand_string(). One for getting the uploaded file’s type and other for generating the uploaded file’s name.

By using the script above, one can upload multiple files. Status of each file is shown as different section with headings of each files.