Javascript - 上传前的图像预览。同一页面上的多个实例需要

Question

我有一个包含多个字段的页面，可以单独上传图片，我想要一个允许用户在提交前预览图片的脚本。

我在第一个字段上使用了这个脚本，它工作正常。

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#main').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

但是，即使我将它们设为唯一，它也不适用于其余的预览。我应该怎么做才能复制相同的脚本并使其在同一页面上的多个实例上运行？

更新:

预览的 html 如下所示:

                    <div class="row">
                        <div class="col-md-3">
                            <h5>Main Photo:</h5>
                            <input class="form-control" type="file" name="main" onchange="readURL(this);" />
                        </div>
                        <div class="col-md-3">
                            <h6>Preview:</h6>
                            <img id='main' style="height:100px;" />
                        </div>
                        <div class="col-md-3">
                            <h5>Front Photo:</h5>
                            <input class="form-control" type="file" name="front" onchange="readURL(this);" />
                        </div>
                        <div class="col-md-3">
                            <h6>Preview:</h6>
                            <img id='front' style="height:100px;" />
                        </div>
                    </div>

Answer 1

也许您可以利用独特的 name <input /> 的属性访问特定/相应图像元素以预览文件的字段，如下所示:

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {

      // Use the input element's name attrbute to select and
      // update the image element with matching id
      $('#' + input.name).attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row">
    <div class="col-md-3">
        <h5>Main Photo:</h5>
        <input class="form-control" type="file" name="main" onchange="readURL(this);" />
    </div>
    <div class="col-md-3">
        <h6>Preview:</h6>
        <img id='main' style="height:100px;" />
    </div>
    <div class="col-md-3">
        <h5>Front Photo:</h5>
        <input class="form-control" type="file" name="front" onchange="readURL(this);" />
    </div>
    <div class="col-md-3">
        <h6>Preview:</h6>
        <img id='front' style="height:100px;" />
    </div>
</div>