I need users to upload several photos, separately and in order, using Html and Javascript. There must be one button per image upload.
I have used JQuery, but it only works with one button, not several.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image1, #image2')
.attr('src', e.target.result)
.width(300)
.height();
};
reader.readAsDataURL(input.files[0]);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<img src="..." alt="Profile Image1" id='image1' class="profileImg1">
<input type='file' class='uploader1' onchange="readURL(this);" />
<div class="overlay">
<i class="fas fa-pencil-alt text"></i>
</div>
</div>
<div class="container2">
<img src="..." alt="Profile Image2" id='image2' class="profileImg2">
<input type='file' class='uploader2' onchange="readURL(this);" />
<div class="overlay">
<i class="fas fa-pencil-alt text"></i>
</div>
</div>You changed both images every time
Instead delegate
Note I gave the ID of the image as a data attribute
I also suggest you use unique IDs instead of unique classnames
const readURL = function() {
if (this.files && this.files[0]) {
const reader = new FileReader();
const preview = this.dataset.preview;
reader.onload = function(e) {
$('#'+preview)
.attr('src', e.target.result)
.width(300)
.height();
};
reader.readAsDataURL(this.files[0]);
}
}
$(function() {
$("#main").on("change", "[type=file]", readURL)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div class="container1">
<img src="..." alt="Profile Image1" id='image1' class="profileImg1">
<input type="file" id="uploader1" data-preview="image1" />
<div class="overlay">
<i class="fas fa-pencil-alt text"></i>
</div>
</div>
<div class="container2">
<img src="..." alt="Profile Image2" id='image2' class="profileImg2">
<input type="file" id="uploader2" data-preview="image2" />
<div class="overlay">
<i class="fas fa-pencil-alt text"></i>
</div>
</div>
</div>