javascript - jQuery onload 代码如何可重用于缩略图 2 和 3

Question

我正在构建的应用程序有三个 input[type="file"]。第一个上传输入以缩略图 1 为目标，第二个上传输入以第二个缩略图为目标，等等。jQuery onload 代码适用于第一个缩略图。有没有办法让缩略图 2 和 3 的代码可重用而不重复代码？

$(window).on('load', function() {
  var files = $("input[type=file]");
  files.change(function(e) {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $(".thumbnail-one img").attr("src", e.target.result);
        $('.full-image img').attr("src", e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    }
  });
});

$(document).ready(function() {
  $('.box').click(function() {
    $('.full-image').html($(this).html());
    console.log(this);
  });
});

body {
  font-family: 'Poppins', Verdana, Arial, sans-serif;
}

fieldset {
  background-color: lavender;
  border: 10px solid darkblue;
  border-radius: 20px;
  margin: 20px auto;
  width: 720px;
}

legend {
  background-color: purple;
  border-radius: 10px;
  color: white;
  padding: 12px;
}

fieldset div {
  margin: 10px;
}

label {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  width: 200px;
}

.container {
  width: 60%;
  overflow: hidden;
  margin: 100px auto;
}

.box {
  width: 100px;
  height: auto;
  padding: 10px;
}

.box {
  cursor: pointer;
}

.full-image {
  width: 580px;
  height: 580px;
  padding: 10px;
}

.col {
  float: right;
}

.full-image img {
  width: 100%;
  /* height: 100%; */
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<title>Image Gallery App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<fieldset>
  <legend>Your Images</legend>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" id="avatar" name="avatar" required="">
  </div>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" id="avatar" name="avatar" required="">
  </div>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" id="avatar" name="avatar" required="">
  </div>
</fieldset>

<div class="container">
  <div class="col">
    <div class="box thumbnail-one">
      <img src="https://http.cat/100" alt="Nature" style="width:100%">
    </div>
    <div class="box thumbnail-two">
      <img src="https://http.cat/405" alt="Snow" style="width:100%">
    </div>
    <div class="box thumbnail-three">
      <img src="https://http.cat/504" alt="Mountains" style="width:100%">
    </div>
  </div>
  <div class="col">
    <div class="full-image">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img src="https://http.cat/100" id="expandedImg" />
    </div>
  </div>
</div>

score 1 · Accepted Answer

function imgUploaded(event, thumbnail){
    var fileInput = event.target;
    if (fileInput.files && fileInput.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $("." +thumbnail +" img").attr("src", e.target.result);
        $('.full-image img').attr("src", e.target.result);
      }
      reader.readAsDataURL(fileInput.files[0]);
  }
}


$(document).ready(function() {
  $('.box').click(function() {
    $('.full-image').html($(this).html());
  });
});

body {
  font-family: 'Poppins', Verdana, Arial, sans-serif;
}

fieldset {
  background-color: lavender;
  border: 10px solid darkblue;
  border-radius: 20px;
  margin: 20px auto;
  width: 720px;
}

legend {
  background-color: purple;
  border-radius: 10px;
  color: white;
  padding: 12px;
}

fieldset div {
  margin: 10px;
}

label {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  width: 200px;
}

.container {
  width: 60%;
  overflow: hidden;
  margin: 100px auto;
}

.box {
  width: 100px;
  height: auto;
  padding: 10px;
}

.box {
  cursor: pointer;
}

.full-image {
  width: 580px;
  height: 580px;
  padding: 10px;
}

.col {
  float: right;
}

.full-image img {
  width: 100%;
  /* height: 100%; */
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<title>Image Gallery App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<fieldset>
  <legend>Your Images</legend>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" onchange="imgUploaded(event, 'thumbnail-one')" name="avatar" required="">
  </div>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" onchange="imgUploaded(event, 'thumbnail-two')" name="avatar" required="">
  </div>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" onchange="imgUploaded(event, 'thumbnail-three')" name="avatar" required="">
  </div>
</fieldset>

<div class="container">
  <div class="col">
    <div class="box thumbnail-one">
      <img src="https://http.cat/100" alt="Nature" style="width:100%">
    </div>
    <div class="box thumbnail-two">
      <img src="https://http.cat/405" alt="Snow" style="width:100%">
    </div>
    <div class="box thumbnail-three">
      <img src="https://http.cat/504" alt="Mountains" style="width:100%">
    </div>
  </div>
  <div class="col">
    <div class="full-image">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img src="https://http.cat/100" id="expandedImg" />
    </div>
  </div>
</div>

score 0 · Accepted Answer

向您添加新attribute data-thumb输入并在此处添加相应的缩略图类，例如data-thumb='thumbnail-one' data-thumb='thumbnail-two'. 您的输入看起来像<input type="file" id="avatar" name="avatar" data-thumb='one' required="">
用于let thumb = $(this).data('thumb');获取里面的缩略图类值files.change(function(e) {...}。请注意，您也可以使用let thumb = $(this).attr('data-thumb');.
$("." + thumb + " img").attr("src", e.target.result);用作选择器。

PS正如@AlwaysHelping 在评论中提到的那样，并且根据建议，您应该始终使用唯一id值。因为如果您使用#avatar它，它将始终返回withfirst中的元素。在形式上它也可能导致问题。DOMid = avatarpostback

$(window).on('load', function() {
  var files = $("input[type=file]");
  files.change(function(e) {
    if (this.files && this.files[0]) {
      let thumb = $(this).data('thumb');
      // let thumb = $(this).attr('data-thumb'); // alternative to above line.
      var reader = new FileReader();
      reader.onload = function(e) {
        $("." + thumb + " img").attr("src", e.target.result);
        $('.full-image img').attr("src", e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    }
  });
});

$(document).ready(function() {
  $('.box').click(function() {
    $('.full-image').html($(this).html());
    console.log(this);
  });
});

body {
  font-family: 'Poppins', Verdana, Arial, sans-serif;
}

fieldset {
  background-color: lavender;
  border: 10px solid darkblue;
  border-radius: 20px;
  margin: 20px auto;
  width: 720px;
}

legend {
  background-color: purple;
  border-radius: 10px;
  color: white;
  padding: 12px;
}

fieldset div {
  margin: 10px;
}

label {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  width: 200px;
}

.container {
  width: 60%;
  overflow: hidden;
  margin: 100px auto;
}

.box {
  width: 100px;
  height: auto;
  padding: 10px;
}

.box {
  cursor: pointer;
}

.full-image {
  width: 580px;
  height: 580px;
  padding: 10px;
}

.col {
  float: right;
}

.full-image img {
  width: 100%;
  /* height: 100%; */
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<title>Image Gallery App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<fieldset>
  <legend>Your Images</legend>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" id="avatar1" name="avatar1" data-thumb='thumbnail-one' required="">
  </div>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" id="avatar2" name="avatar2" data-thumb='thumbnail-two' required="">
  </div>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" id="avatar3" name="avatar3" data-thumb='thumbnail-three' required="">
  </div>
</fieldset>

<div class="container">
  <div class="col">
    <div class="box thumbnail-one">
      <img src="https://http.cat/100" alt="Nature" style="width:100%">
    </div>
    <div class="box thumbnail-two">
      <img src="https://http.cat/405" alt="Snow" style="width:100%">
    </div>
    <div class="box thumbnail-three">
      <img src="https://http.cat/504" alt="Mountains" style="width:100%">
    </div>
  </div>
  <div class="col">
    <div class="full-image">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img src="https://http.cat/100" id="expandedImg" />
    </div>
  </div>
</div>

javascript - jQuery onload 代码如何可重用于缩略图 2 和 3

2 回答 2

Related

Reference