Just starting out, I have the following HTML code within a <form>:
<div class="image-upload">
<img id="send_photo_img1" src="assets/images/index2.png"/>
<input id="send_photo_input1" type="file"/>
<img id="send_photo_img2" src="assets/images/index2.png"/>
<input id="send_photo_input2" type="file"/>
</div>
The goal is to allow users to click on the image (index2.png) with a "+" sign as a placeholder, which would then open a window like an input=file, allowing the user to choose an image to replace the placeholder.
Here is the rest of the code:
Jquery function inspired by @Ivan Bayev's answer here:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#send_photo_img1').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#send_photo_img1").click(function(){
$("#send_photo_input1").trigger("click");
$("#send_photo_input1").change(function(){
readURL(this);
});
});
CSS styling:
.image-upload > input
{
display: none;
}
While the code works, I'm not completely satisfied with (1) the use of jQuery and (2) the loading time once the image replaces the placeholder. The "loading" sign remains for about 30-40 seconds before disappearing.
Any advice or suggestions are greatly appreciated. Thank you!