Preview An Image Before It Is Uploaded | Code Factory

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type='file' id="imageFile" />
<img id="prevImage" src="#" alt="Image" />
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
$('#prevImage').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}
$("#imageFile").change(function() {
readURL(this);
});
</script>

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Right tooling, Right Problem: Preact at Adyen

Puzzle fitting all pieces together

Service Workers and Caching Strategies(Part 1)

Creating modules in JavaScript using Webpack and Babel — Part 2

Setup New Angular Project

Problem with TypeScript’s classes

Getting Started with NestJS

refund policy

React-native API call using Fetch

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Code Factory

Code Factory

More from Medium

Setting Up Git Environment

Git logo with the word git next to it.

Git Configuration

SQL Injection VS Prepared Statement

How to install Tailwind CSS in Angular 11.2