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

Quick Tip: listing all your globally installed NPM packages

Creating Redux TodoMVC App Using ES6/7 Part 2: Adding Todo

Creating a Side Menu Component With Stencil using Events, Listen, and <slot />

Learn React Router V6 with a simple example!

Creating Musical Scales With The Web Audio API

YouTube Video | YDKJS — Scopes and Closures — 1

Web Design: Finding a new challenge

https://www.nasa.gov/audience/forstudents/5-8/features/nasa-knows/what-is-the-iss-58.html

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

When to use Node JS and When not to?

Project-DERMSTORE

The Basics of Responsive Web Design

JavaScript Array length — the definitive guide