Question

所以我正在为客户准备网站。我需要帮助的问题区域是照片的上传和预览区域。照片无需在此过程中传输，与示例相比，只需上传和预览即可（用于牙科诊所）。

有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帮助聊天。

Answer 1

我刚刚创建了一个function readurl(a)，我正在向其中传递参数a。此参数将告诉功能{{1}的id和input的{{1}}的功能。因为id中所有img的ID应该不同。

HTML和JS代码

elements

html

我没有添加任何CSS样式。

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

1 个答案: