单击上传按钮 : PHP 更改图像 src

Question

我不确定这是否可能，但我想如果是的话，我会知道的。基本上我使用 ajax-upload 脚本来上传图像，在上传按钮下方我显示当前图像的缩略图。

它是一个商店的产品，所以一个产品有很多图片，在“编辑产品”页面加载时，所有的缩略图都是已经保存到数据库中的缩略图。但是，当用户单击上传按钮并选择不同的文件时，我希望显示新图像，但问题是，它还没有插入到数据库中。

代码如下所示:

<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>

因此，正如您所看到的，img src 在一个简单的查询中从数据库中得到回显，该查询位于实际页面的上方，这工作正常。我知道上传图片的文件名会在上传文件时保存到名为“附件”的隐藏表单输入中。但是在提交表格之前。

有没有办法在页面提交前把图片来源改成上传的？或者有人能想出一个聪明的方法来做到这一点吗？

Answer 1

您可以使用 jQuery 或纯 javascript 来修改 src 属性。您需要为 img 标签提供一个 id 属性，以便将其与其他 img 标签区分开来。这是一个非常基本的示例，您需要尝试一下才能使其正常工作:

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