title: send Images in chats using PHP + jQuery + MYSQL
body: <p>I have a chat application which works absolutely fine for sending and receiving texts only but I want to send images/videos/ files through it.</p>
  
  <p>This is the main home page which display the chats.</p>
  
  <pre><code>&lt;script&gt;
    $ = jQuery;
    var currentID = null;
    var chatTimer = null;
    var oldhtml="";
  
    function fetch_data() {
      $.ajax({
        url: "select.php",
        method: "POST",
        success: function(data) {
          $('#live_data').html(data);
        }
      });
    }
  
    function fetch_chat() {   
      $.ajax({
        url: "fetch_chat.php",
        method: "POST",
        data: {
          id: currentID
        },
        dataType: "text",
        success: function(data) {
          $("#chatbox").show();
          $('#messages').html(data);
          $("div.area").show();
          if(oldhtml!==data) {
            $('#messages').scrollTop($('#messages')[0].scrollHeight);
          }
          oldhtml=data;
        }    
      });
    }
  
    $(document).ready(function() {    
      fetch_data();
      setInterval(function() {
        fetch_chat();
      }, 500);
      $(document).on('click', '.first_name', function() {
        currentID = $(this).data("id1");
        fetch_chat();
      });
      $("#sub").click(function() {
        var text = $("#text").val();
        $.post('insert_chat.php', {
          id: currentID,
          msg: text
        }, function(data) {
          $("#messages").append(data);
          $("#text").val('');       
        });
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>and below is the fetch_chat.php which fetches the chat from databases.</p>
  
  <pre><code>&lt;?php
    require("config.php");
    $user_to = $_POST['id'];
    $res1=$db-&gt;query("select * from chats where user_from='$_SESSION[id]' AND 
  user_to='$user_to' OR user_to='$_SESSION[id]' AND user_from='$user_to' order 
  by id");
    if($res1-&gt;num_rows){
      while($row=$res1-&gt;fetch_object()){
        if($row-&gt;user_from === $_SESSION["id"] ) {
          echo "&lt;div class='chat self'&gt;
            &lt;div class='user-photo'&gt;&lt;img src='img/user1.jpg'&gt;&lt;/div&gt;
            &lt;p class='chat-message'&gt; $row-&gt;msg&lt;/p&gt;
          &lt;/div&gt;";
        }  else {
          echo "&lt;div class='chat friend'&gt;
            &lt;div class='user-photo'&gt;&lt;img src='img/user2.jpg'&gt;&lt;/div&gt;
            &lt;p class='chat-message'&gt;$row-&gt;msg&lt;/p&gt;
          &lt;/div&gt;";
        }
      }
    } else
      echo "No msgs &lt;br /&gt;";
  ?&gt;
  </code></pre>
  
  <p>Now I want to save the info of the uploaded file in the database and the files into a folder/directory. The sender and receiver should be able to send and view the files respectively.</p>