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

Question

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

＆＃13;

＆＃13;

            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);
            });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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都应该是唯一的。

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

＆＃13;

＆＃13;

// 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]);
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

随着斯科特马库斯的回答，这里是我的问题的完整答案，这不是重复。除了javascript问题，我还有显示问题。请注意，您可能必须使用像素才能使用自己的代码。出于某种原因，我不得不写一些与我的程序中的代码不同的内容，以便片段工作......

所以这是：

  
  // 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 .labelav.largeFile{
    width:33.33%;
  display: inline-block;
  margin-bottom: 10%;
    border-radius: 10px;
  border: 5px dashed #ccc;
 min-height:200px;
      cursor:pointer;
    background: url("http://www.startuppassion.eu/wp-content/uploads/2017/03/plus-sign.png") no-repeat center;
        background-size: 40%;
}
.labelav img{
    width:30%;
    position:absolute;
    left:20px;
}
.labelav.largeFile img:after {
  width:100% !important;
  display:inline-block;
    max-width:100%;
}
.labelav.largeFile input.file {
width:0px;
height:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class='col-md-4 imgblock'>
    <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 imgblock'>
    <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 imgblock'>
    <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>