javascript - 如何在自定义样式输入文件中上传之前显示图像？

Question

我试图在用户上传到数据库之前在自定义样式输入文件标签内显示每个图像。我正在使用的脚本一次只能显示一张图像，而且它总是位于随机位置。我希望每个图像看起来都好像在标签内。每个图像都不会显示在标签内。我做错了什么？

            function readURL(input) {
              if (input.files && input.files[0]) {
                var reader = new FileReader();
        reader.onload = function (e) {
            $('#photo1').attr('src', e.target.result);
                 }
        reader.onload = function (e) {
            $('#photo2').attr('src', e.target.result);
                 }
        reader.onload = function (e) {
            $('#photo3').attr('src', e.target.result);
                 }
        reader.onload = function (e) {
            $('#photo4').attr('src', e.target.result);
                 }

        reader.readAsDataURL(input.files[0]);
              }
            }
            $(".img1").change(function() {
              readURL(this);
            });
            $(".img2").change(function() {
              readURL(this);
            });
            $(".img3").change(function() {
              readURL(this);
            });
            $(".img4").change(function() {
              readURL(this);
            });

.col-md-4 {
  width: 33.33333333%;
  display: inline-block;
  margin-bottom: 15%;
}

.labelav.largeFile:after {
  position: relative;
  width: 5% !important;
  max-width: 100%;
  content: "Upload Photo + ";
  text-align: center;
  padding: 10%;
  border-radius: 10px;
  border: 5px dashed #ccc;
  color: #ccc;
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-size: medium;
}

.labelav.largeFile:hover:after {
  background: #ccc;
  color: #fff;
  cursor: pointer;
}

.labelav.largeFile input.file {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class='col-md-4'>
    <label class="labelav largeFile" for="file">
      <input type="file" id="file" class="file img1" name="photo1" />
      <img id="photo1" src="#" alt="" />
    </label>
  </div>

  <div class='col-md-4'>
    <label class="labelav largeFile" for="file">
      <input type="file" id="file" class="file img2" name="photo2" />
      <img id="photo2" src="#" alt="" />
    </label>
  </div>

  <div class='col-md-4'>
    <label class="labelav largeFile" for="file">
      <input type="file" id="file" class="file img3" name="photo3" />
      <img id="photo3" src="#" alt="" />
    </label>
  </div>

  <div class='col-md-4'>
    <label class="labelav largeFile" for="file">
      <input type="file" id="file" class="file img4" name="photo4" />
      <img id="photo4" src="#" alt="" />
    </label>
  </div>
</form>

Answer 1

图像出现在最后一个位置的原因是因为在您的 readURL 函数中，您覆盖了 .onload 属性，以便只有最后一个值(指向#photo4) 被存储:

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

            // All you are doing here is setting the value of the 
            // onload property...
            reader.onload = function(e) {
              $('#photo1').attr('src', e.target.result);
            }

            // And here, you are overwriting the last value and storing
            // a new one...
            reader.onload = function(e) {
              $('#photo2').attr('src', e.target.result);
            }

            // And here, you are overwriting the last value and storing
            // a new one...
            reader.onload = function(e) {
              $('#photo3').attr('src', e.target.result);
            }

            // This is the function that will actually run
            // when the load event of the reader fires because it is 
            // the last value you are storing in the propery:
            reader.onload = function(e) {
              $('#photo4').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
          }
        }

此外，您的每个 input type=file 元素都使用相同的 id，这绝不是一个好主意。所有 id 都应该是唯一的。

现在，由于您的代码中有太多重复，我们可以将其减少到这个工作版本:

// No need to set up essentially the same event handler separately
// This will set each of the input type=file elements up to the same
// change event handling function. The 'e' argument represents the
// change event itself:
$(".file").on("change", function(e) {
  if (this.files && this.files[0]) {
    var reader = new FileReader();
      
    // Use W3C DOM Event Standard for setting up event listeners
    // instead of `onclick`, `onload`, etc. properties. We can use
    // the same one function no matter which input type=file was clicked
    // Here 'evt' represents the load event of the reader
    reader.addEventListener("load", function(evt) {
      // Set the src attribute of the next element sibling
      // to the input that was changed:
      e.target.nextElementSibling.setAttribute('src', evt.target.result);
    });
    
    reader.readAsDataURL(this.files[0]);
  }
});

.col-md-4 {
  width: 33.33333333%;
  display: inline-block;
  margin-bottom: 15%;
}

.labelav.largeFile:after {
  position: relative;
  width: 5% !important;
  max-width: 100%;
  content: "Upload Photo + ";
  text-align: center;
  padding: 10%;
  border-radius: 10px;
  border: 5px dashed #ccc;
  color: #ccc;
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-size: medium;
}

.labelav.largeFile:hover:after {
  background: #ccc;
  color: #fff;
  cursor: pointer;
}

.labelav.largeFile input.file {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class='col-md-4'>
    <label class="labelav largeFile" for="file1">
      <input type="file" id="file1" class="file img1" name="photo1">
      <img id="photo1" src="#" alt="">
    </label>
  </div>

  <div class='col-md-4'>
    <label class="labelav largeFile" for="file2">
      <input type="file" id="file2" class="file img2" name="photo2">
      <img id="photo2" src="#" alt="">
    </label>
  </div>

  <div class='col-md-4'>
    <label class="labelav largeFile" for="file3">
      <input type="file" id="file3" class="file img3" name="photo3">
      <img id="photo3" src="#" alt="">
    </label>
  </div>

  <div class='col-md-4'>
    <label class="labelav largeFile" for="file4">
      <input type="file" id="file4" class="file img4" name="photo4">
      <img id="photo4" src="#" alt="">
    </label>
  </div>
</form>