图像上传和预览选项，代码不允许显示不同的图像答案

【问题标题】：Image Upload and Preview Option, Code Not Allowing For Distinct Images To Display图像上传和预览选项，代码不允许显示不同的图像
【发布时间】：2019-07-24 17:36:54
【问题描述】：

所以我正在为客户开发一个网站。我需要帮助的问题区域是照片的上传和预览区域。在这个过程中不需要传输照片，这只是上传和预览，并与一个例子——牙科诊所进行对比。

有 5 张示例照片和 5 个上传部分，他们可以在其中预览示例旁边的照片。

我使用的代码是：

<style>
    /* Image Designing Propoerties */
    .thumb {
        height: 75px;
        border: 1px solid #000;
        margin: 10px 5px 0 0;
    }
</style>

<script type="text/javascript">
    /* The uploader form */
    $(function () {
        $(":file").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();

                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
        $('#yourImage').attr('src', e.target.result);
    };

</script>


<input type='file' />
</br><img id="myImg" src="#" alt="your image" height=247 width=330>

所以这是踢球者。当我将此代码用于一个代码块（在 Squarespace 平台上构建）时，它将上传并显示该块的照片，这没问题。

当我将它添加到其他区域时，上传目标要么更改为不同的区域，要么调整它我得到了两个块来显示相同的图像，但我不知道如何编写它，所以每个块都显示它的自己的图像，我不确定我忽略了什么会触发它的 ID 或 SRC。

如果需要，我很乐意发送链接和站点密码以供进一步检查。在此先感谢，第一次使用 stackoverflow 帮助聊天。

【问题讨论】：

客户的平台是 Squarespace。任何和所有帮助表示赞赏我已经调整了几次，但我找不到我的错误和解决方案。
你的js代码没有预览图片！可以使用我自己的代码来预览图像吗？
当我插入图像时，图像会预览，但如果我添加另一个代码块并上传不同的图像，它只会显示相同或更改第一个代码块。就好像它不能清楚地认出它是自己的一样
如果我的回答有帮助，请点击勾选drive.google.com/open?id=1A_aTMwRDwYXFa-xcnXVt2g0kTIiRgmrR 将其标记为已接受

标签： javascript html image upload image-uploading

【解决方案1】：

我刚刚创建了一个function readurl(a)，我正在向它传递一个参数a。这个参数将告诉函数关于input 的id 和img 的id 我们要在哪里预览图像。因为html中所有elements的id应该不同。

HTML & JS 代码

function readurl(a) 
{
    input=document.getElementById('input'+a);
    if (input.files && input.files[0]) 
    {
        var reader = new FileReader();
        reader.onload = function (e) 
        {
            document.getElementById('blah'+a).src=e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="new_img_container" >
        <label id="file">Upload image
        <input onchange="readurl(1)" id="input1" name="product_img" type="file" name="image" size="60" required>
        </label>
        <br>
        <img id="blah1" src="../images/product_image.png" alt="product_image" >
    </div>
    <br><br>
    <div class="new_img_container" >
        <label id="file">Upload image
        <input onchange="readurl(2)" id="input2" name="product_img" type="file" name="image" size="60" required>
        </label>
        <br>
        <img id="blah2" src="../images/product_image.png" alt="product_image" >
    </div>
</body>
</html>

我没有为样式添加任何 CSS。

【讨论】：