PHP, MySQL, Drupal, .htaccess, Robots.txt, Phponwebsites

4 Jun 2015

Ajax upload file or image in PHP using jQuery

     You can upload files and images using PHP. Basically it can be uploaded by form submitting. For more details visit how to upload file or image using PHP. When i tried to upload images using Ajax with jQuery, i can't get it work. All of you may be face this problem. This blog describes how to upload file or image in PHP using jQuery with Ajax.

     Consider the following example for upload files using Ajax and PHP.

Html form for upload image:

   
      To upload file or image, your html form should be like below form:

<form name="multiform" id="multiform" action="#" method="POST" enctype="multipart/form-data">
    Image : <input type="file" name="file" id="file" /></br>
    <input  type="button" id="multi-post" value="Upload"></input>
</form>

      where,
          enctype="multpart/form-data  -  must be present in form. Otherwise file does not upload.
          type="file" in <input>  tag is used to take input as a file.

Ajax and jQuery for upload image:

   
     Before add Ajax code to your html file, you need to add jquery-1.7.2.min.js library file. To upload image, you have to write Ajax code like below:

$(document).ready(function(){
  $("#multiform").submit(function(e) {
    var formObj = $(this);
   
    if(window.FormData !== undefined) {
      var formData = new FormData(this);
      $.ajax({
        url: 'upload.php', //url to process the sent data
        type: 'POST',     //form type
        data:  formData, //form data to send
        mimeType:"multipart/form-data",  //type of form data
        contentType: false,  //content type of form
        cache: false,  //disable cache the request page
        processData: false,  //to send DOMDcoument or non processed data file
        success: function(data, textStatus, jqXHR) {
          $("#er").html(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          $("#er").html('textStatus=' + textStatus + ', errorThrown=' + errorThrown);
        }          
      });
   
      //reset file field after form submitted
      $('#file').val('')
      //prevent the page is refreshed
      e.preventDefault();
      //e.unbind();
    }
  });

  $("#multi-post").click(function() {
    //submit the form and send data
    $("#multiform").submit();
  });

});


      When user click the upload button, the form is submitted, ajax is called and send form data as well.

Html file with Ajax for upload image:


      We need to combine html form and ajax code to make a full html file for upload file or image. You may add some styles to html file in order to give attractive presence to users. After combined above all things, your html code should be like below one:

upload-ajax.html:

<html>
<head>
<style type="text/css">
 body {
 color:white;
 font-size:14px;
 }
 .contact {
    text-align:center;
    background: none repeat scroll 0% 0% #8FBF73;
    padding: 20px 10px;
    box-shadow: 1px 2px 1px #8FBF73;
    border-radius: 10px;
 width:520px;
 }
 #file {
    width: 250px;
    margin-bottom: 15px;
    background: none repeat scroll 0% 0% #AFCF9C;
    border: 1px solid #91B57C;
    height: 30px;
    color: #808080;
    border-radius: 8px;
    box-shadow: 1px 2px 3px;
    padding: 3px 4px;
}
#multi-post
{
    background:none repeat scroll 0% 0% #8FCB73;
    display: inline-block;
    padding: 5px 10px;
    line-height: 1.05em;
    box-shadow: 1px 2px 3px #8FCB73;
    border-radius: 8px;
    border: 1px solid #8FCB73;
    text-decoration: none;
    opacity: 0.9;
    cursor: pointer;
 color:white;
}
#er {
    color: #F00;
    text-align: center;
    margin: 10px 0px;
    font-size: 17px;
}
</style>
</head>
<body> 
<script type="text/javascript" src="../test/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#multiform").submit(function(e) {
    var formObj = $(this);
   
    if(window.FormData !== undefined) {
      var formData = new FormData(this);
      $.ajax({
        url: 'upload.php',
        type: 'POST',
        data:  formData,
        mimeType:"multipart/form-data",
        contentType: false,
        cache: false,
        processData:false,
        success: function(data, textStatus, jqXHR) {
          $("#er").html('<pre><code>'+data+'</code></pre>');
        },
        error: function(jqXHR, textStatus, errorThrown) {
          $("#er").html('textStatus=' + textStatus + ', errorThrown=' + errorThrown);
        }          
      });

      $('#file').val('')
      e.preventDefault();
      //e.unbind();
    }
  });

  $("#multi-post").click(function() {
    //sending form from here
    $("#multiform").submit();
    console.log();
  });

});

</script>
<div class="contact">
  <h1>Upload files using Ajax and PHP</h1>
  <div id="er"></div>
  <form name="multiform" id="multiform" action="#" method="POST" enctype="multipart/form-data">
    Image : <input type="file" name="file" id="file" /></br>
    <input  type="button" id="multi-post" value="Upload"></input>
  </form>
</div>
</body>     
</html>

     
      When you view the upload-ajax.html in browser, it should be like below image:

How to upload images using PHP, and Ajax with jQuery

 

PHP snippet for upload file:


      When ajax is called, url which is in ajax call received form data. Then the file or image is to be uploaded using following PHP code.

upload.php:

<?php
 $file=$_FILES['file']['name'];
 if($file!='')
 {
  //upload file
  move_uploaded_file($_FILES['file']['tmp_name'],$_SERVER['DOCUMENT_ROOT'].'/test/uploaded_img/'.$file);
  //check whether file is exists or not in a folder
  if(file_exists($_SERVER['DOCUMENT_ROOT'].'/test/uploaded_img/'.$file)) {
   echo'Uploaded successfully';
  }
  else {
   echo'File is not uploaded';
  }
 }


     Where,
        move_uploaded_file() - used to upload the file
        file_exists() - used to check whether the file is already exists in a folder or not after upload the file
        $_SERVER['DOCUMENT_ROOT'] - used to represent the directory 

        Now you can add either file or image using PHP and jQuery with Ajax.