I have a modal window from which I upload (I look for the image on my PC) and display an image. At the same time I have another button that is to save the photo in the database.
My question is: How do I use JQuery's Before send function to show a spinner or an image to show that the photo is loading or taking its time before being displayed?
How do I put the necessary code?
Here is the code I use.
function showMyImage(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.getElementById("thumbnil");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
<div class="img-wrapper-pic-profile">
<img id="thumbnil" width="150px" height="150px" src="" alt="Foto aqui.!"/>
</div>
<input name="foto" type="file" accept="image/*" onchange="showMyImage(this)" class="pic-input"/>
You could create a kind of loader (gif image) which you can show/hide as you like while the request is running.
You can do it in the following way: