jQuery onload 代码如何可重复用于缩略图 2 和 3
我正在构建的应用程序具有三个输入 [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;
}
绝地无双浏览 72回答 2
2回答
-
慕尼黑8549860
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">×</span> <img src="https://http.cat/100" id="expandedImg" /> </div> </div></div> -
达令说
向您添加新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">×</span> <img src="https://http.cat/100" id="expandedImg" /> </div> </div></div>
随时随地看视频慕课网APP
相关分类
JavaScript