How to upload a file through jQuery

I’m writing a small PHP script to add some data in to a MySQL database. I’m using jQuery to send my text data to the processing PHP file which will put the data in to the MySQL data base that part is ok and working with out any issue.

But in this same form I need to upload a file to a folder in the server and save that path or the file name in to the database column “Img”.

I’ve searched through the Stack site but didn’t get any clue how to do this. If jQuery can’t do this please tell me how to archive this with out loosing the text submission part. I’m going to list my code here.

My process PHP:

include ('connect.php');

$data = ("SELECT * FROM poiinfo");

$poiName = $_REQUEST['Name'];
$poiDes = $_REQUEST['Descrip'];
$poiCon = $_REQUEST['ConInfo'];
/*$poiImg = $_REQUEST['Image']; */ <-- my Image data but this is not the way need correct this

$dbData = "INSERT INTO poiinfo(`Name`, `Des.`, `Contact`) VALUES ('$poiName','$poiDes','$poiCon')";

$putData = mysql_query($dbData);

if ($putData){
    echo "Data inserted";
}else {
    echo "Not Done";

My form:


 * @author SiNUX
 * @copyright 2013

include ('connect.php');

$lastId = mysql_query("SELECT ID FROM poiinfo ORDER BY ID DESC LIMIT 1");

if ($row = mysql_fetch_array($lastId)){

    $nId = $row['ID'];
    $nId == "0";
    $nId = $nId++;

    mysql_quary("INSERT INTO poiinfo ('ID') VALUES ('$nId')");

}else {

    $lId = $row['ID'];
    $lId = $lId + 0;
    $tId = $lId;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src=""></script>

<script type="text/javascript">
    var name  = document.getElementById("Name").value;
    var desc = document.getElementById("Descrip").value;
    var con = document.getElementById("ConInfo").value;

    var dataString = 'Name='+name+'&Descrip='+desc+'&ConInfo='+con;
       if(data="Data inserted") {
          //alert("Data  Success");
          document.getElementById('msg').innerHTML= "<div style=\"background-color:#0F0; text-align:center; color: #060\">Data Saved</dive>";
        } else {
          //alert("Not Inserted");
          document.getElementById('msg').innerHTML= "<div style=\"background-color:#0F0; text-align:center; color: red\">Data Not Saved</div>";


<form method="post" enctype="multipart/form-data" name="form1" id="form1">
    <label for="poiid">ID :</label>
    <input type="text" name="poiid" id="poiid" readonly="readonly" style="width:70px;" value="<?php echo $tId; ?>" />
    <label for="Name">POI Name :</label>

    <input type="text" name="Name" id="Name" />
    <label for="Descrip" style="alignment-adjust:middle">POI Description :</label>
    <textarea name="Descrip" id="Descrip" cols="45" rows="5"></textarea>
    <label for="ConInfo">Contact Infomation :</label>
    <textarea name="ConInfo" id="ConInfo" cols="45" rows="5"></textarea>
    <label for="Img">POI Image :</label>
    <!--<input type="file" name="Image" id="Image" /> --> <-- File upload place but for now it's commented out.
  <p><div id="msg"></div></p>
  <div align="center">
    <input type="button" name="Submit" id="save_data" value="Submit" style="width:100px;" />
    <input type="reset" name="reset" id="reset" value="Rest Data" style="width:100px;" />

Please help me as I said in most post’s I saw that AJAX or jQuery can’t handle the file upload so if there way to do it please educate me.

Also you guys are guru of coding I’m just a grasshopper so is this good coding or do I need to improve more on my style and also in the above form I have the ajax part in the header should I move it to another file and link it to the form.

Leave a Reply

Your email address will not be published. Required fields are marked *