How to upload an image file using javaScript

Question

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.

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.

I would greatly appreciate some help on this, even if it's just a nudge in the right direction.

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.

Here is my code for the admin page

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Administration</title>
    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <style rel="stylesheet" type="text/css">
    #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 >  a, #deleteButtons a:hover{
        color:#FFF;
    }
    #deleteButtons{
        display:inline-block;
        clear:right;
        text-align:center;
    }
    </style>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">"http://jquery.com"</script>
    <script type="text/javascript">
$(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<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("<th></th>")});$.each($("#myTable table tbody tr"),function(){$(this).append("<td></td>")})});$("#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("<thead><tr><th>Delete Row</th><th>Delete Column</th></tr></thead><tbody></tbody>");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<=rowCount;i++){var tr=document.createElement("tr");if(rowCount>1)$(tr).append('<td><a href="#" class="deleteRow" data-row-number="'+(i-1)+'">Delete Row '+i+"</a></td>");else $("#deleteButtons thead tr th").eq(0).remove();if(i<=columnCount&&columnCount>1)$(tr).append('<td><a href="#" class="deleteColumn" data-column-number="'+(i-1)+'">Delete Column '+i+"</a></td>");tbody.append(tr)}$("#deleteButtons").show()}
});
    </script>

<?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"))
    && ($_FILES["file"]["size"] < 20971520)
    && in_array($extension, $allowedExts)){

      if ($_FILES["file"]["error"] > 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

}
?>

</head>
<body>
    <h1>Table administration</h1>

    <form method="post" action="" enctype="multipart/form-data">
  Product ID<input type="text" name="productid" id="productid" value="" /><br />
  <input type="file" name="file" id="file" /><br />
  <input type="submit" name="submit" value="Upload File" />
</form>
<br /><br />
    <section>
        <article>
            <div id="myTable" contenteditable></div>
            <table id="deleteButtons">
                <thead><tr><th>Delete Row</th><th>Delete Column</th></tr></thead>
                <tbody></tbody>
            </table>
            <nav data-type="table-tools">
                <ul>
                    <li>
                        <a href="#" id="addRow">New row</a>
                    </li>
                    <li>
                        <a href="#" id="addColumn">New column</a>
                    </li>
                    <li>
                        <a href="#" id="saveTable">Save table</a>
                    </li>
                    <li><a href="#" id="deleteRow">Show Delete Table</a></li>
                </ul>
            </nav>
        </article>
    </section>
</body>
</html>

And also here is my code for the special-offers page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Special Offers</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <!--[if !IE 7]>
        <style type="text/css">
            #wrap {display:table;height:100%}
        </style>
        <![endif]-->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">"http://jquery.com"</script>
        <script type="text/javascript">
            /* 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();
            });
        </script>
    </head>
    <body>
        <div id="wrap">
        <div id="header">
            <h1>Claybrooke Animal Feeds Limited</h1>
            <p id="p1">Directors: K.R. Hall and R.J. Hall<br />Wholesale &amp; Retail Feed Merchants'<br /> UFAS Registration 549</p>
            <div id="nav">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="special-offers.php">Special Offers</a></li>
                    <li><a href="about.php">About Us</a></li>
                    <li><a href="contact.php">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="main">
            <div id="myTable"></div>
        </div>
        <div id="footer">
            <?php include('includes/footer.php'); ?>
        </div>
    </body>
</html>

And finally the code for the actual table itself

<table>
    <thead>
        <tr>
            <th>Product ID</th>
            <th>Picture</th>
            <th>Item Description</th>
        <th>Was</th><th>Now</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>12345</td>
        <td><?php if(file_exists('upload_folder/12345.jpg')){ ?><img src="upload_folder/12345.jpg" /><?php }else{ echo "No Picture";} ?></td>
            <td></td>
        <td></td><td></td></tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        <td></td><td></td></tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        <td></td><td></td></tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        <td></td><td></td></tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        <td></td><td></td></tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        <td></td><td></td></tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        <td></td><td></td></tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        <td></td><td></td></tr>
    </tbody>
</table>

and finally here is the code for the saveTable.php

<?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');
?>

Please read up on how to properly ask questions on StackOverflow. http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it — Diodeus - James MacFarlane, Jul 12 '13 at 14:38
@Diodeus I hope I've now made it less localized and more of a "real" question. — Matthew Webb, Jul 12 '13 at 15:04
I guess normal html could work, the thing is when the picture gets uploaded via the admin page, it needs to be displayed on the special-offers page as-well, I wasn't sure that html could do that, but if it can then that's great. — Matthew Webb, Jul 12 '13 at 15:08
[Here](http://stackoverflow.com/a/16445138/1344509) better explained how to upload image and detecting finish of uploading image file. — Ikrom, Jul 12 '13 at 15:31
@bob the link in your comment don't explain nothing about the problem in this question. — Sbml, Jul 12 '13 at 15:39
@bob would the code that you used in the link work from another page? I need the code on the admin page and the table on the special offers page. — Matthew Webb, Jul 15 '13 at 09:09

score 1 · Answer 1 · answered Jul 12 '13 at 14:40

1

Your question is not very clear to be honest. I assume you want a user to be able to click on a table cell, upload an image and display this image in the same table cell.

I'd start with the following:

create a form with file upload and set display to none.
add a click event handler to the table cell and set it handle the file upload of the hidden form
write script to save the image on the filesystem and write a link to it in the database
have the script return link of the image on your server
Write out an image element with your image in the table cell

answered Jul 12 '13 at 14:40

Chris Koster

403
4
12

I'll try and make it a bit clearer. The table on the admin page allows the admin to make changes to the table that is displayed on the special-offers page. What I'm trying to do is get it so that (from the admin page) the user can change the description of the product (which I already have working) and also upload an image of that product . – Matthew Webb Jul 12 '13 at 14:46
Ok, good. I suppose the same steps as mentioned before would do the trick. – Chris Koster Jul 17 '13 at 12:55

Sbml · Accepted Answer · 2013-07-15T11:53:53.103

0

For example:

<?php

if(isset($_POST['submit'])){

    $uploadDir = 'images/';
    $image_name = time()."-";


    $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"))
    && ($_FILES["file"]["size"] < 20971520)
    && in_array($extension, $allowedExts)){

      if ($_FILES["file"]["error"] > 0){

        echo "ERROR CODE: " . $_FILES["file"]["error"];

        }else{

          $final_name = $uploadDir . $image_name . $_FILES["file"]["name"];
          move_uploaded_file($_FILES["file"]["tmp_name"], $final_name);

    }
  }else{
      echo "INVALID FILE";
  }

  //then save $final_name (path for the image) to your database

}

?>

<form method="post" action="" enctype="multipart/form-data">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" value="Submit" />
</form>

To see your image then you just need to select the row with the image path:

<?php

$sql = "SELECT .......";

?>

<img src="<?= $row[image]?>;" />

Working Test Page:

<?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"))
    && ($_FILES["file"]["size"] < 20971520)
    && in_array($extension, $allowedExts)){

      if ($_FILES["file"]["error"] > 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

}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload Test</title>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
  Product ID<input type="text" name="productid" id="productid" value="" /><br />
  <input type="file" name="file" id="file" /><br />
  <input type="submit" name="submit" value="Upload File" />
</form>
<br /><br />
<div id="myTable">
  <table border=1>
    <thead>
      <tr>
        <th>Product ID</th>
        <th>Picture</th>
        <th>Item Description</th>
        <th>Was</th>
        <th>Now</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>12345</td>
        <td><?php if(file_exists('upload_folder/12345.jpg')){ ?><img src="upload_folder/12345.jpg" /><?php }else{ echo "No Picture";} ?></td>
        <td>Vestibulum dolor sapien, bibendum non dolor nec, vehicula suscipit dolor. Maecenas viverra porta lorem, vitae aliquam neque facilisis vitae.</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>54321</td>
        <td><?php if(file_exists('upload_folder/54321.jpg')){ ?><img src="upload_folder/54321.jpg" /><?php }else{ echo "No Picture";} ?></td>
        <td>Vestibulum dolor sapien, bibendum non dolor nec, vehicula suscipit dolor. Vitae aliquam neque facilisis vitae.</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

edited Jul 15 '13 at 11:53

answered Jul 12 '13 at 14:48

Sbml

1,907
2
16
26

Thanks for the code, I've notice that you have this bit "//then save $final_name (path for the image) to your database" would it still work if I don't have a database for the website? – Matthew Webb Jul 12 '13 at 14:52
This may sound stupid but where exactly do I put this code? Do I put it inside the table or do I put at the top with the rest of the javascript stuff? – Matthew Webb Jul 12 '13 at 15:03
For your needs (add product description, enter product ID, image, and others),to save, edit and delete content, create a database with the table content, is the best option. – Sbml Jul 12 '13 at 15:04
Put the php code in the top of the page. The form you could put inside table if you want – Sbml Jul 12 '13 at 15:05
Is it not possible to be able to keep it up on the site or make it get saved on the server? I'm just checking all of my options first – Matthew Webb Jul 12 '13 at 15:07
You could save the data for a txt file for example. Search here in stackoverflow, you have many information about saving the data to txt or variables to other file with php, for example http://stackoverflow.com/questions/14998961/php-write-file-from-input-to-txt – Sbml Jul 12 '13 at 15:27
I've tried your code (been busy over the weekend) and while I get the browse file and submit buttons at the bottom of the page, I get this message at the top of the page. 0){ echo "ERROR CODE: " . $_FILES["file"]["error"]; }else{ $final_name = $uploadDir . $image_name . $_FILES["file"]["name"]; move_uploaded_file($_FILES["file"]["tmp_name"], $final_name); } }else{ echo "INVALID FILE"; } //then save $final_name (path for the image) to your database } ?> Have I put the code in wrong somewhere? – Matthew Webb Jul 15 '13 at 10:32
I believe it's this part that is causing the error if ($_FILES["file"]["error"] > 0){ echo "ERROR CODE: " . $_FILES["file"]["error"]; }else{ $final_name = $uploadDir . $image_name . $_FILES["file"]["name"]; move_uploaded_file($_FILES["file"]["tmp_name"], $final_name); } }else{ echo "INVALID FILE"; } //then save $final_name (path for the image) to your database } ?> As soon as it reaches the ">" bit it goes black instead of blue in the code. – Matthew Webb Jul 15 '13 at 10:47
@Matthew Webb I edited my answer and added a full test page that creates the folder and upload the files, test it. – Sbml Jul 15 '13 at 10:56
I've tested it and it does work thanks. However is there a way to get the image to be displayed in a table? Here's the table I'm talking about http://www.claybrookeanimalfeeds.co.uk/special-offers.php. Obviously the image will go in the image column. I have an admin page that allows me to edit the data in that table, so ideally I would like to be able to upload the image using the admin page otherwise anyone can upload an image to that table. – Matthew Webb Jul 15 '13 at 11:08
@MatthewWebb I update my working test page. As I understand you don't want to use a database so, in this script you need to insert the product id when you upload your file, test it and upload an jpg image with the product ID "12345". Look to the code and let me now if you don't understand something. – Sbml Jul 15 '13 at 11:58
@MatthewWebb With this method you need to create your html table body manually with all your products. – Sbml Jul 15 '13 at 12:00
Right that is working now, thanks for the help. Now I just need to add that code to rest of the code on the admin page, which I'm sure I can manage on my own. And also hopefully it will update the table on the special offers page when I add the image to the table in the admin page – Matthew Webb Jul 15 '13 at 12:06
what do I need to if the product id isn't going to be "12345" and I don't know what it will be? because ideally the product id is going to be entered at the same time as the image, so can I have it blank and still work? – Matthew Webb Jul 15 '13 at 12:17
@MatthewWebb In the top of my code I have $productID = $_POST['productid']; so the productID is equal to the value that I entered in the form. In admin page, make the upload after generating your product ID and change this line, for example $productID = $generatedProductID; In the table you can for example use the php function scandir() and search in the upload_folder/ dir the matching image for each product ID. – Sbml Jul 15 '13 at 13:18
@MatthewWebb Update your question please and show the code that you have in the admin page for add product, descriptions, and so, in the table of the other page. With your code its easier to help you. – Sbml Jul 15 '13 at 13:23
I've added the code (which I hope will be useful) I just want to be able to add an image without knowing what the product id will be. – Matthew Webb Jul 15 '13 at 13:33
@MatthewWebb Thanks, add please the saveTable.php – Sbml Jul 15 '13 at 13:48
i've uploaded the saveTable.php – Matthew Webb Jul 15 '13 at 14:05
one last try. I've tried putting it the $generatedProductID and the scandir() in the code but it doesn't work. Either I've put the code in or the code itself won't work. – Matthew Webb Jul 16 '13 at 15:43

How to upload an image file using javaScript

2 Answers2