I have two image inputs I want the user to be able to add an image to each, and when they do change the image for each. Unfortunately when one changes the image for the second (profile image) the banner is changed.
How can I fix this? (Images are added to their respective img's)
$('#fileButton2').change(function() {
$('#fileButton2').prop(
// 'disabled',
!($('.upload-block :checked').length && $('#InputFile').val()));
var fileButton = document.getElementById('fileButton2');
var file = fileButton.files[0];
// alert(file.getDownloadURL)
// document.getElementById("avatar").src = file
var reader = new FileReader();
var imgtag = document.getElementById("profImg");
imgtag.title = file.name;
reader.onload = function(event) {
imgtag.src = event.target.result;
};
reader.readAsDataURL(file);
});
$('#fileButton').change(function() {
$('#fileButton').prop(
// 'disabled',
!($('.upload-block :checked').length && $('#InputFile').val()));
var fileButton = document.getElementById('fileButton');
var file = fileButton.files[0];
// alert(file.getDownloadURL)
// document.getElementById("avatar").src = file
var reader = new FileReader();
var imgtag = document.getElementById("avatar");
imgtag.title = file.name;
reader.onload = function(event) {
imgtag.src = event.target.result;
};
reader.readAsDataURL(file);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML:<div class="middleSignUpDiv"><form class="js-form"><!-- action="process.php" method="post"--><div class="imgcontainer"><img onclick='pickFile()' src="images/defaultBanner.png" alt="Avatar" class="avatar" id="avatar"><input type="file" id="fileButton" value="upload" /></div><div class="profileImageContainer"><img onclick='pickFile()' src="images/defaultProfImg.png" alt="Avatar" class="profImg" id="profImg"><input type="file" id="fileButton2" value="upload" /></div></form></div>Update I believe this is an important part of the problem (this runs at the top in the header):
<script>
function pickFile() {
fileButton.click()
}
</script>