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>

Answer 2

在同一页面上的多个实例上预览文件（图像）之前，先对其进行预览。

只需使用图像输入字段名称作为id即可显示img。使用demo to jsfiddle查看下面的简单代码。

 
  $("input[type=file]").change(function() {
    readURL(this);
    filename = this.files[0].name;
    console.log(filename);
  });
  
  
  // image file upload preview
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('#' + input.name).attr('src', reader.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>User Image</label>
 <input type="file" name="user_image"> <br />
 <img id="user_image" style="width:75px;" />
 <hr />
<label>User Signature</label>
 <input type="file" name="user_signature"> <br />
 <img id="user_signature" style="width:75px;" />
</form>

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

2 个答案: