图片上传预览仅适用于第一行

我有一个带有产品列表的表,每一行都有一个“编辑”和“删除”按钮。当您单击“编辑”时,将弹出一个带有模式的模态对话框,其中包括带有“选择文件”按钮的图像框。

我希望在上传之前预览图像。

<div class="foodimagebox align-self-center col-sm-12 col-md-6">
    <div class="imagebox">
        <img id="output" src="../<?php echo $row->images; ?>" height="250" width="250"> 
    </div>

    <div class="choosefile">
        <input id="imageup" accept="image/*" onchange="loadFile(event)" class="choosefile" type="file" name="images">
    </div>
</div>

</div> 

这是我包含的JavaScript代码:

var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
        URL.revokeObjectURL(output.src) // free memory
    }
};

但是预览仅适用于第一行。它不适用于任何其他行。任何想法如何解决这一问题?

评论