PHP changing image src on click of an upload button:

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?

Upload the image to a temp table that is used to store/display the thumbnail image. When the final image is saved to the database delete the row from the temp table. — WhoaItsAFactorial
@ObjectiveJ: Before the page is submitted? Wouldn't you need the page to be submitted in order to upload the image? It is coming from a user, right? — RonaldBarzell
Its an ajax upload, so its does it without needing to submit the form, its mainly so all the information can be saved to the DB at the same time. — Bohdi

imkingdavid imkingdavid · Accepted Answer · 2012-12-04T14:09:08

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

PHP changing image src on click of an upload button:

2 Answers