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

Answer 2

为图片指定ID，例如

<img id = "my_image" src="../shop/<?php echo $prodinforow["ProdThumb"]; ?>

然后：

在上传按钮的onclick中，输入：

<div onclick="document.getElementById('myImage').src = '/path/to/image'" id="upload"></div>

PHP点击上传按钮更改图像src：

2 个答案: