如何解决如何访问多个上传文件中第一个的值
当前，下面的代码将在提交点击事件后将最后上传的图像显示为大图像。我希望全图类显示第一个上载的图像，而不是最后一个。有没有一种方法可以显示第一个上传的图像，而不是最后一个上传的图像。有没有办法获取第一个上载图像的价值？任何帮助将不胜感激。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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>
<link ref="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="fieldset">
<div class="legend">
Your Images
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</div>
<div class="upload_form">
<div class="menu">
<label for="avatar">Upload Your Image:</label>
<input type="file" id="avatar1" name="avatar1" data-thumb='thumbnail-one' required="">
<button type="submit" id="delete_btn_1">Delete</button>
</div>
<div>
<label for="avatar">Upload Your Image:</label>
<input type="file" id="avatar2" name="avatar2" data-thumb='thumbnail-two' required="">
<button type="submit" class="delete_btn">Delete</button>
</div>
<div>
<label for="avatar">Upload Your Image:</label>
<input type="file" id="avatar3" name="avatar3" data-thumb='thumbnail-three' required="">
<button type="submit" class="delete_btn">Delete</button>
</div>
<div class="submit-container">
<button type="submit" id="submit_btn">Submit</button>
</div>
</div>
</div>
<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 class="closebtn">×</span> -->
<img src="https://http.cat/100" id="expandedImg" />
</div>
</div>
</div>
</body>
</html>
jQuery
<script type="text/javascript">
const menuBtn = document.querySelector('.menu-btn');
const uploadForm = document.querySelector('.upload_form')
let menuOpen = false;
menuBtn.addEventListener('click',() => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
uploadForm.classList.add('open')
} else {
menuBtn.classList.remove('open');
menuOpen = false;
uploadForm.classList.remove('open');
}
});
$(document).ready(function() {
$('.box').click(function() {
$('.full-image').html($(this).html());
});
$('#delete_btn_1').click(function() {
$(files).val('');
});
$("#submit_btn").on("click",function () {
var files = $("input[type=file]");
files.each(function (e) {
if (this.files && this.files[0]) {
let thumb = $(this).data('thumb');
var reader = new FileReader();
console.log(thumb);
reader.onload = function (e) {
console.log(e);
// let imgOne = $(".thumbnail-one img").attr("src",e.target.result);
$("." + thumb + " img").attr("src",e.target.result);
// I need the line below to access the first uploaded image instead of the last image
$('.full-image img').attr("src",e.target.result);
}
reader.readAsDataURL(this.files[0]);
menuBtn.classList.remove('open');
menuOpen = false;
uploadForm.classList.remove('open');
}
});
$(files).val('');
});
});
</script>
CSS
body {
font-family: 'Poppins',Verdana,Arial,sans-serif;
background-image: linear-gradient(to right,#6441a5,#2a0845);
/* background: purple; */
}
.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;
margin: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.fieldset div {
margin: 10px;
}
label {
display: inline-block;
text-align: right;
vertical-align: top;
width: 200px;
}
.submit-container {
/* width: 100%; */
text-align: right;
}
.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;
}
.menu-btn {
display: inline-block;
position: relative;
cursor: pointer;
transition: all .5s ease-in-out;
}
.menu-btn__burger {
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,.menu-btn__burger::after {
content: '';
position: absolute;
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(255,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-8px);
}
.menu-btn__burger::after {
transform: translateY(8px);
}
/* Animation */
/* We are targeting the middle line here */
.menu-btn.open .menu-btn__burger {
/*Moves off to the left*/
transform: translateX(-50px);
background-color: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px,-35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px,35px);
}
.upload_form {
display: none;
transition: display .7s;
}
.upload_form.open {
display: block;
transition: display .7s;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。