title: How to upload an image file using javaScript
body: <p>I have a table that allows me to make changes (such as; add product description, enter product ID and other values) to another table that's on a different page. Now, I can edit all the content such as the item description and the prices, but what I would also like is to be able to upload an image to that table as well. </p>
  
  <p>Now I assume I just do some sort of form on the table in the admin page which has an "upload image" button in it that allows the admin to upload the image to the table. However I'm not entirely sure how to make it so that the image gets transferred on to the table in the special-offers page.</p>
  
  <p>I would greatly appreciate some help on this, even if it's just a nudge in the right direction.</p>
  
  <p>I should also note that I would like the image to go into a particular column and be able to go in different rows in that column. I've looked at different JavaScript codes but the ones I've found seem to be to just upload the file and not put it in a particular place.</p>
  
  <p>Here is my code for the admin page</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Administration&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"&gt;
      &lt;style rel="stylesheet" type="text/css"&gt;
      #myTable{
          outline:none;
          clear:left;
          display:inline-block;
      }
      tr, td,th{
          border-collapse: collapse;
          border:1px solid;
          border-radius:4px;
          padding:2px;
      }
      th{
          background-color:#FABA48;
      }
      td{
          height:22px;
          min-width:125px;
          background-color:#FAD884;
      }
      nav[data-type="table-tools"] ul li{
          display:inline-block;
          list-style-type:none;
          margin-right:10px;
          background-color:darkgoldenrod;
           border-radius:5px;
  
          padding:5px;
      }
      #deleteButtons td{
          background-color:darkgoldenrod;
      }
      nav[data-type="table-tools"] ul li a, #deleteButtons a{
          font-weight:bold;
          text-decoration:none;
          color:#000;
          opacity:0.6;
      }
      nav[data-type="table-tools"] ul li:hover &gt;  a, #deleteButtons a:hover{
          color:#FFF;
      }
      #deleteButtons{
          display:inline-block;
          clear:right;
          text-align:center;
      }
      &lt;/style&gt;
  
      &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;"http://jquery.com"&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  $(document).ready(function(){$("#deleteButtons").css("display","none");var getTable=function(){$("#myTable").html("");$.get("myTable.html",function(callback_data){var table=callback_data;document.getElementById("myTable").innerHTML=table})};getTable();$("#addRow").click(function(event){event.preventDefault();var colNumber=$($("#myTable tbody tr")[0]).children("td").length;var tr=document.createElement("tr");var td="";for(var i=0;i&lt;colNumber;i++){td=document.createElement("td");td.appendChild(document.createTextNode("\n"));
  tr.appendChild(td)}$("#myTable tbody").append(tr)});$("#addColumn").click(function(event){event.preventDefault();$.each($("#myTable table thead tr"),function(){$(this).append("&lt;th&gt;&lt;/th&gt;")});$.each($("#myTable table tbody tr"),function(){$(this).append("&lt;td&gt;&lt;/td&gt;")})});$("#saveTable").click(function(event){event.preventDefault();var table=$("#myTable").html();$.post("saveTable.php",{"myTable":table},function(callback_data){$("#myTable").slideToggle("fast");if($("#deleteButtons")[0].style.display!=
  "none")$("#deleteButtons").slideToggle("fast");setTimeout(function(){getTable();setTimeout(function(){$("#myTable").slideToggle();if($("#deleteButtons")[0].style.display=="none")$("#deleteButtons").slideToggle()},50)},500)})});$("#deleteRow").click(function(){if($("#deleteButtons")[0].style.display!="none"){$(this).text("Show Delete Table");$("#deleteButtons").slideToggle("fast")}else{showDeleteTable();$(this).text("Hide Delete Table")}});$("body").on("click","a.deleteRow",function(){var index=$(this).data("row-number");
  $("#myTable table tbody").children("tr").eq(index).remove();showDeleteTable()});$("body").on("click","a.deleteColumn",function(){var index=$(this).data("column-number");$("#myTable table thead tr").children("th").eq(index).remove();$.each($("#myTable table tbody tr"),function(){$(this).children("td").eq(index).remove()});showDeleteTable()});function showDeleteTable(){$("#deleteButtons").html("&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Delete Row&lt;/th&gt;&lt;th&gt;Delete Column&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;/tbody&gt;");var rowCount=$("#myTable table tbody tr").length;
  var columnCount=$("#myTable table tbody tr").eq(0).children("td").length;var tbody=$("#deleteButtons tbody");for(var i=1;i&lt;=rowCount;i++){var tr=document.createElement("tr");if(rowCount&gt;1)$(tr).append('&lt;td&gt;&lt;a href="#" class="deleteRow" data-row-number="'+(i-1)+'"&gt;Delete Row '+i+"&lt;/a&gt;&lt;/td&gt;");else $("#deleteButtons thead tr th").eq(0).remove();if(i&lt;=columnCount&amp;&amp;columnCount&gt;1)$(tr).append('&lt;td&gt;&lt;a href="#" class="deleteColumn" data-column-number="'+(i-1)+'"&gt;Delete Column '+i+"&lt;/a&gt;&lt;/td&gt;");tbody.append(tr)}$("#deleteButtons").show()}
  });
      &lt;/script&gt;
  
  &lt;?php
  if(isset($_POST['submit'])){
  
      $productID = $_POST['productid']; 
  
      if(empty($productID)){
          die("Please enter the Product ID!");
      }
  
      $folderName = "upload_folder";
  
      if ( !file_exists($folderName) ) {
          mkdir($folderName,0775);
      }
  
      $uploadDir = $folderName. '/';
      $image_name = $productID;
  
      $allowedExts = array("gif", "jpeg", "jpg", "png");
      $extension = end(explode(".", $_FILES["file"]["name"]));
  
      if ((($_FILES["file"]["type"] == "image/gif")
      || ($_FILES["file"]["type"] == "image/jpeg")
      || ($_FILES["file"]["type"] == "image/jpg")
      || ($_FILES["file"]["type"] == "image/pjpeg")
      || ($_FILES["file"]["type"] == "image/x-png")
      || ($_FILES["file"]["type"] == "image/png"))
      &amp;&amp; ($_FILES["file"]["size"] &lt; 20971520)
      &amp;&amp; in_array($extension, $allowedExts)){
  
        if ($_FILES["file"]["error"] &gt; 0){
  
          echo "ERROR CODE: " . $_FILES["file"]["error"];
  
          }else{
  
          $path_parts = pathinfo($_FILES["file"]["name"]);
          $extension = $path_parts['extension'];
  
          $final_name = $uploadDir . $image_name . '.' . $extension;
          move_uploaded_file($_FILES["file"]["tmp_name"], $final_name);
          echo "Image Uploaded Sucessfully to: " . $final_name;
  
      }
    }else{
        echo "INVALID FILE";
    }
  
    //then save $final_name (path for the image) to your database
  
  }
  ?&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Table administration&lt;/h1&gt;
  
      &lt;form method="post" action="" enctype="multipart/form-data"&gt;
    Product ID&lt;input type="text" name="productid" id="productid" value="" /&gt;&lt;br /&gt;
    &lt;input type="file" name="file" id="file" /&gt;&lt;br /&gt;
    &lt;input type="submit" name="submit" value="Upload File" /&gt;
  &lt;/form&gt;
  &lt;br /&gt;&lt;br /&gt;
      &lt;section&gt;
          &lt;article&gt;
              &lt;div id="myTable" contenteditable&gt;&lt;/div&gt;
              &lt;table id="deleteButtons"&gt;
                  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Delete Row&lt;/th&gt;&lt;th&gt;Delete Column&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
                  &lt;tbody&gt;&lt;/tbody&gt;
              &lt;/table&gt;
              &lt;nav data-type="table-tools"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="#" id="addRow"&gt;New row&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#" id="addColumn"&gt;New column&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#" id="saveTable"&gt;Save table&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" id="deleteRow"&gt;Show Delete Table&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/article&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And also here is my code for the special-offers page</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Special Offers&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="stylesheet.css" /&gt;
          &lt;!--[if !IE 7]&gt;
          &lt;style type="text/css"&gt;
              #wrap {display:table;height:100%}
          &lt;/style&gt;
          &lt;![endif]--&gt;
          &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;"http://jquery.com"&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              /* On page load */
              $(document).ready(function () {
              var getTable = function () {
                /*We empty the div */
                $('#myTable').html('');
                /*We load the table */
                $.get('myTable.html', function (callback_data) {
                    var table = callback_data;
                    document.getElementById('myTable').innerHTML = table;
                });
              };
              getTable();
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wrap"&gt;
          &lt;div id="header"&gt;
              &lt;h1&gt;Claybrooke Animal Feeds Limited&lt;/h1&gt;
              &lt;p id="p1"&gt;Directors: K.R. Hall and R.J. Hall&lt;br /&gt;Wholesale &amp;amp; Retail Feed Merchants'&lt;br /&gt; UFAS Registration 549&lt;/p&gt;
              &lt;div id="nav"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="special-offers.php"&gt;Special Offers&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.php"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.php"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="main"&gt;
              &lt;div id="myTable"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              &lt;?php include('includes/footer.php'); ?&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And finally the code for the actual table itself</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Product ID&lt;/th&gt;
              &lt;th&gt;Picture&lt;/th&gt;
              &lt;th&gt;Item Description&lt;/th&gt;
          &lt;th&gt;Was&lt;/th&gt;&lt;th&gt;Now&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;12345&lt;/td&gt;
          &lt;td&gt;&lt;?php if(file_exists('upload_folder/12345.jpg')){ ?&gt;&lt;img src="upload_folder/12345.jpg" /&gt;&lt;?php }else{ echo "No Picture";} ?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and finally here is the code for the saveTable.php</p>
  
  <pre><code>&lt;?php
      if(!isset($_POST['myTable']))
          die('No data provided.');
  
      $table = $_POST['myTable'];
  
      $handle = fopen('myTable.html','w');
      $result = fwrite($handle,$table);
      if($result)
          fclose($handle);
      else
          die('Error writing file');
  ?&gt;
  </code></pre>