Question

I’m not sure if this is even possible, but I figure if it is, SO will know. Basically I use a ajax-upload script to upload an image, and below the upload button I display a thumbnail of the current image.

Its for a shops products, so a product has numerous pictures, on load of the ‘edit product’ page, all the thumbnails are those that have already been saved to the DB. However when a user clicks the upload button and chooses a different file I would like the new image to be displayed instead, but the problem is, it hasn’t been inserted into the DB yet.

Code looks like this:

<tr>
    <td align="right">Product Thumbnail:</td>
    <td>
     <table>
        <tr>
         <td>
           <div id="upload" >
              <button type="button">Upload</button>
           </div>
         </td>
         <td id="myfilename"></td>
        </tr>
    </table>
   </td>
  </tr>
   <tr>
    <td align="right">Thumb:</td>
    <td align="left">
    <img src="../shop/<?php echo $prodinforow["ProdThumb"]; ?>" width="115" border="0">&nbsp;<a href=""><img src="images/1001-cancel16.gif" width="16" height="16" alt="" border="0"></a>
    <div id="upload"></div>
    </td>
    </tr>

So as you can see the img src gets echo’d from the DB in a simple query that is futher up the actual page, this works fine. I know that the filename of the uploaded image gets saved into a hidden form input called ‘attachments’ when the file is uploaded. But before the form is submitted.

Is there anyway I can change the source of the picture to the uploaded one before the page is submitted? Or can anyone thing of a clever way to do this?

Answer 1

You can use jQuery or just plain javascript to modify the src attribute. You’ll need to give the img tag an id attribute so you can distinguish it from the other img tag. This is very basic example that you will need to play around with to get it working:

// using jquery, assuming a button with the id "upload_button"
// is pressed when the image is selected
$('#upload_button').click(function() {
    $('img#my_img').attr('src', './path/to/new/image');
});