I have the following code
function readFile() {
if (this.files && this.files[0]) {
var FR= new FileReader();
FR.addEventListener("load", function(e) {
document.getElementById("img").src = e.target.result;
document.getElementById("b64").innerHTML = e.target.result;
console.log(e.target.result)
$.ajax({
url: "https://postman-echo.com/post",
type: 'POST',
data: {
imageBase64:e.target.result
},
dataType: 'json',
success: function(data) {
console.log(data)
},
error: function(xhr, ajaxOptions, thrownError) {
if (xhr.status == 404) {
console.log("error")
}
}
});
});
FR.readAsDataURL( this.files[0] );
}
}
document.getElementById("inp").addEventListener("change", readFile);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputid="inp" type='file'>
<p id="b64"></p>
<img id="img" height="150">
I would like to track the upload progress of the image, using base64, with pure javascript or jquery.
Is it possible?