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

Question

我正在构建的应用程序具有三个输入 [type="file"]。第一个上传输入目标是缩略图 1，第二个上传输入目标是第二个缩略图，依此类推。jQuery 加载代码适用于第一个缩略图。有没有办法在不重复代码的情况下使代码可重复用于缩略图 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;

}

Answer 1

function imgUploaded(event, thumbnail){&nbsp; &nbsp; var fileInput = event.target;&nbsp; &nbsp; if (fileInput.files && fileInput.files[0]) {&nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; reader.onload = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; $("." +thumbnail +" img").attr("src", e.target.result);&nbsp; &nbsp; &nbsp; &nbsp; $('.full-image img').attr("src", e.target.result);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; reader.readAsDataURL(fileInput.files[0]);&nbsp; }}$(document).ready(function() {&nbsp; $('.box').click(function() {&nbsp; &nbsp; $('.full-image').html($(this).html());&nbsp; });});body {&nbsp; font-family: 'Poppins', Verdana, Arial, sans-serif;}fieldset {&nbsp; background-color: lavender;&nbsp; border: 10px solid darkblue;&nbsp; border-radius: 20px;&nbsp; margin: 20px auto;&nbsp; width: 720px;}legend {&nbsp; background-color: purple;&nbsp; border-radius: 10px;&nbsp; color: white;&nbsp; padding: 12px;}fieldset div {&nbsp; margin: 10px;}label {&nbsp; display: inline-block;&nbsp; text-align: right;&nbsp; vertical-align: top;&nbsp; width: 200px;}.container {&nbsp; width: 60%;&nbsp; overflow: hidden;&nbsp; margin: 100px auto;}.box {&nbsp; width: 100px;&nbsp; height: auto;&nbsp; padding: 10px;}.box {&nbsp; cursor: pointer;}.full-image {&nbsp; width: 580px;&nbsp; height: 580px;&nbsp; padding: 10px;}.col {&nbsp; float: right;}.full-image img {&nbsp; width: 100%;&nbsp; /* height: 100%; */}.closebtn {&nbsp; position: absolute;&nbsp; top: 10px;&nbsp; right: 15px;&nbsp; color: white;&nbsp; font-size: 35px;&nbsp; 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>&nbsp; <legend>Your Images</legend>&nbsp; <div>&nbsp; &nbsp; <label for="avatar">Upload Your Image:</label>&nbsp; &nbsp; <input type="file" onchange="imgUploaded(event, 'thumbnail-one')" name="avatar" required="">&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <label for="avatar">Upload Your Image:</label>&nbsp; &nbsp; <input type="file" onchange="imgUploaded(event, 'thumbnail-two')" name="avatar" required="">&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <label for="avatar">Upload Your Image:</label>&nbsp; &nbsp; <input type="file" onchange="imgUploaded(event, 'thumbnail-three')" name="avatar" required="">&nbsp; </div></fieldset><div class="container">&nbsp; <div class="col">&nbsp; &nbsp; <div class="box thumbnail-one">&nbsp; &nbsp; &nbsp; <img src="https://http.cat/100" alt="Nature" style="width:100%">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box thumbnail-two">&nbsp; &nbsp; &nbsp; <img src="https://http.cat/405" alt="Snow" style="width:100%">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box thumbnail-three">&nbsp; &nbsp; &nbsp; <img src="https://http.cat/504" alt="Mountains" style="width:100%">&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="col">&nbsp; &nbsp; <div class="full-image">&nbsp; &nbsp; &nbsp; <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>&nbsp; &nbsp; &nbsp; <img src="https://http.cat/100" id="expandedImg" />&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

向您添加新attribute&nbsp;data-thumb的输入并在此处添加相应的缩略图类，例如data-thumb='thumbnail-one'&nbsp;data-thumb='thumbnail-two'.&nbsp;你的输入看起来像<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() {&nbsp; var files = $("input[type=file]");&nbsp; files.change(function(e) {&nbsp; &nbsp; if (this.files && this.files[0]) {&nbsp; &nbsp; &nbsp; let thumb = $(this).data('thumb');&nbsp; &nbsp; &nbsp; // let thumb = $(this).attr('data-thumb'); // alternative to above line.&nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; reader.onload = function(e) {&nbsp; &nbsp; &nbsp; &nbsp; $("." + thumb + " img").attr("src", e.target.result);&nbsp; &nbsp; &nbsp; &nbsp; $('.full-image img').attr("src", e.target.result);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; reader.readAsDataURL(this.files[0]);&nbsp; &nbsp; }&nbsp; });});$(document).ready(function() {&nbsp; $('.box').click(function() {&nbsp; &nbsp; $('.full-image').html($(this).html());&nbsp; &nbsp; console.log(this);&nbsp; });});body {&nbsp; font-family: 'Poppins', Verdana, Arial, sans-serif;}fieldset {&nbsp; background-color: lavender;&nbsp; border: 10px solid darkblue;&nbsp; border-radius: 20px;&nbsp; margin: 20px auto;&nbsp; width: 720px;}legend {&nbsp; background-color: purple;&nbsp; border-radius: 10px;&nbsp; color: white;&nbsp; padding: 12px;}fieldset div {&nbsp; margin: 10px;}label {&nbsp; display: inline-block;&nbsp; text-align: right;&nbsp; vertical-align: top;&nbsp; width: 200px;}.container {&nbsp; width: 60%;&nbsp; overflow: hidden;&nbsp; margin: 100px auto;}.box {&nbsp; width: 100px;&nbsp; height: auto;&nbsp; padding: 10px;}.box {&nbsp; cursor: pointer;}.full-image {&nbsp; width: 580px;&nbsp; height: 580px;&nbsp; padding: 10px;}.col {&nbsp; float: right;}.full-image img {&nbsp; width: 100%;&nbsp; /* height: 100%; */}.closebtn {&nbsp; position: absolute;&nbsp; top: 10px;&nbsp; right: 15px;&nbsp; color: white;&nbsp; font-size: 35px;&nbsp; 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>&nbsp; <legend>Your Images</legend>&nbsp; <div>&nbsp; &nbsp; <label for="avatar">Upload Your Image:</label>&nbsp; &nbsp; <input type="file" id="avatar1" name="avatar1" data-thumb='thumbnail-one' required="">&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <label for="avatar">Upload Your Image:</label>&nbsp; &nbsp; <input type="file" id="avatar2" name="avatar2" data-thumb='thumbnail-two' required="">&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <label for="avatar">Upload Your Image:</label>&nbsp; &nbsp; <input type="file" id="avatar3" name="avatar3" data-thumb='thumbnail-three' required="">&nbsp; </div></fieldset><div class="container">&nbsp; <div class="col">&nbsp; &nbsp; <div class="box thumbnail-one">&nbsp; &nbsp; &nbsp; <img src="https://http.cat/100" alt="Nature" style="width:100%">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box thumbnail-two">&nbsp; &nbsp; &nbsp; <img src="https://http.cat/405" alt="Snow" style="width:100%">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box thumbnail-three">&nbsp; &nbsp; &nbsp; <img src="https://http.cat/504" alt="Mountains" style="width:100%">&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="col">&nbsp; &nbsp; <div class="full-image">&nbsp; &nbsp; &nbsp; <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>&nbsp; &nbsp; &nbsp; <img src="https://http.cat/100" id="expandedImg" />&nbsp; &nbsp; </div>&nbsp; </div></div>