Articles → JavaScript → Reading Image File Javascript Using Filereader
Reading Image File Javascript Using Filereader
Example
- A file upload control
- An image control
Readasdataurl Method
Code
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#upload").change(function (evt) {
for (var i = 0, f; f = evt.target.files[i]; i++) {
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById("imgTest").src = evt.target.result;
};
reader.readAsDataURL(f);
}
});
});
</script>
</head>
<body>
<form>
<img id="imgTest" src="#" />
<input type="file" id="upload" />
</form>
</body>
</html>
Output