I want to be able to preview a file (image) before it is uploaded. The preview action should be executed all in the browser without using Ajax to upload the image.

How can I do this?

Justin's user avatar

Justin

87.3k49 gold badges231 silver badges375 bronze badges

asked Dec 16, 2010 at 9:51

Simbian's user avatar

2

imgInp.onchange = evt => { const [file] = imgInp.files if (file) { blah.src = URL.createObjectURL(file) } } <form runat="server"> <input accept="image/*" type='file' id="imgInp" /> <img id="blah" src="#" alt="your image" /> </form>

answered Dec 16, 2010 at 9:55

Ivan Baev's user avatar

10 Comments

what if no file is choosen after upload one ?\

2018-12-15T09:10:55.483Z+00:00

@EasyBB After changing the orientation of the image, how to replace it with the actual uploaded image? I am getting the old image only.

2019-05-28T10:40:24.117Z+00:00

Internet Explorer version 20H2 says evt => is a wrong syntax :(.

2021-07-27T11:54:57.383Z+00:00

@Esamo change it to be a normal function declaration instead of arrow

2022-09-06T22:54:06.667Z+00:00

There are a couple ways you can do this. The most efficient way would be to use URL.createObjectURL() on the File from your <input>. Pass this URL to img.src to tell the browser to load the provided image.

Here's an example:

<input type="file" accept="image/*" onchange="loadFile(event)"> <img id="output"/> <script> var loadFile = function(event) { var output = document.getElementById('output'); output.src = URL.createObjectURL(event.target.files[0]); output.onload = function() { URL.revokeObjectURL(output.src) // free memory } }; </script>

You can also use FileReader.readAsDataURL() to parse the file from your <input>. This will create a string in memory containing a base64 representation of the image.

<input type="file" accept="image/*" onchange="loadFile(event)"> <img id="output"/> <script> var loadFile = function(event) { var reader = new FileReader(); reader.onload = function(){ var output = document.getElementById('output'); output.src = reader.result; }; reader.readAsDataURL(event.target.files[0]); }; </script>

Brian Burns's user avatar

Brian Burns

22.4k10 gold badges94 silver badges80 bronze badges

answered Nov 27, 2014 at 8:17

nkron's user avatar

5 Comments

to avoid memory issues you should call URL.revokeObjectURL when you are done with your blob

2018-11-20T16:09:28.323Z+00:00

about your first comment @tfmontague. Are you sure? I just copied the bese64 string after using readAsDataURL and opened it in another browser and it works.

2020-10-08T15:17:48.957Z+00:00

@Lonel Lupu - Believe my answer was incorrect! Also used readAsDataURL and was able to convert the base64 characters into an image.

2020-10-29T11:05:36.393Z+00:00

Read carefully: When an image is uploaded using the file input, it is stored in the browser's cache. The URL.createObjectURL() will create a link to the cached image on the browser. To create the base64 string of the file which can be stored in a database use readAsDataURL.

2020-10-29T11:33:42.05Z+00:00

One-liner solution:

The following code uses object URLs, which is much more efficient than data URL for viewing large images (A data URL is a huge string containing all of the file data, whereas an object URL, is just a short string referencing the file data in-memory):

<img id="blah" alt="your image" width="100" height="100" /> <input type="file" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

Generated URL will be like:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

answered Nov 18, 2014 at 20:00

cnlevy's user avatar

2 Comments

@Raptor and so is the whole File API... (FileReader, input.files etc.) URL.createObjectURL is the way to go when dealing with user submitted files, it only creates an in-memory symlink to the real file on user's disk.

2017-07-02T02:20:26.95Z+00:00

Beautiful. But what about clearing memory using URL.revokeObjectURL()? :D

2021-03-27T07:10:23.71Z+00:00

Try This

To PREVIEW the image before uploading it to the SERVER from the Browser without using Ajax or any complicated functions.

It needs an "onChange" event to load the image.

function preview() { frame.src=URL.createObjectURL(event.target.files[0]); } <form> <input type="file" onchange="preview()"> <img id="frame" src="" width="100px" height="100px"/> </form>

To preview multiple image click here

answered Jun 3, 2020 at 7:36

Merrin K's user avatar

2 Comments

IMPORTANT: If/when using this method it's necessary to remove the object URL to prevent memory leaks. This is done by calling URL.revokeObjectURL(myObjectUrl), where myObjectUrl is the object URL created (this means that you'll need to assign the Object URL to a temporary variable before setting the image src). See developer.mozilla.org/en-US/docs/Web/API/URL/….

2021-01-15T21:13:23.603Z+00:00

this works fine for single image, if there are three image files, with different id's / src it won't change the source for the next ones

2023-07-28T08:12:05.8Z+00:00

The answer of LeassTaTT works well in "standard" browsers like FF and Chrome. The solution for IE exists but looks different. Here description of cross-browser solution:

In HTML we need two preview elements, img for standard browsers and div for IE

HTML:

<img id="preview" src="" alt="" style="display:none; max-width: 160px; max-height: 120px; border: none;"/> <div id="preview_ie"></div>

In CSS we specify the following IE specific thing:

CSS:

#preview_ie { FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) }

In HTML we include the standard and the IE-specific Javascripts:

<script type="text/javascript"> {% include "pic_preview.js" %} </script> <!--[if gte IE 7]> <script type="text/javascript"> {% include "pic_preview_ie.js" %} </script>

The pic_preview.js is the Javascript from the LeassTaTT's answer. Replace the $('#blah') whith the $('#preview') and add the $('#preview').show()

Now the IE specific Javascript (pic_preview_ie.js):

function readURL (imgFile) { var newPreview = document.getElementById('preview_ie'); newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value; newPreview.style.width = '160px'; newPreview.style.height = '120px'; }

That's is. Works in IE7, IE8, FF and Chrome. Please test in IE9 and report. The idea of IE preview was found here: http://forums.asp.net/t/1320559.aspx

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx

Yashwardhan Pauranik's user avatar

answered Dec 24, 2011 at 11:58

Dmitri Dmitri's user avatar

This is size improvement of cmlevy answer - try

<input type=file oninput="pic.src=window.URL.createObjectURL(this.files[0])"> <img id="pic" />

answered Jul 27, 2020 at 16:55

Kamil Kiełczewski's user avatar

2 Comments

How do you get the entire file path?

2020-09-03T15:36:34.973Z+00:00

@Bbb it not looks like typical path - it look like some temporary "link": blob:null/35c35011-111c-4d9e-ac3f-a779e049eb3d

2020-09-03T16:16:16.46Z+00:00

I have edited @Ivan's answer to display "No Preview Available" image, if it is not an image:

function readURL(input) { var url = input.value; var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase(); if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) { var reader = new FileReader(); reader.onload = function (e) { $('.imagepreview').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); }else{ $('.imagepreview').attr('src', '/assets/no_preview.png'); } }

answered Jun 5, 2014 at 6:23

Sachin Prasad's user avatar

Here's a multiple files version, based on Ivan Baev's answer.

The HTML

<input type="file" multiple id="gallery-photo-add"> <div class="gallery"></div>

JavaScript / jQuery

$(function() { // Multiple images preview in browser var imagesPreview = function(input, placeToInsertImagePreview) { if (input.files) { var filesAmount = input.files.length; for (i = 0; i < filesAmount; i++) { var reader = new FileReader(); reader.onload = function(event) { $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview); } reader.readAsDataURL(input.files[i]); } } }; $('#gallery-photo-add').on('change', function() { imagesPreview(this, 'div.gallery'); }); });

Requires jQuery 1.8 due to the usage of $.parseHTML, which should help with XSS mitigation.

This will work out of the box, and the only dependancy you need is jQuery.

answered Dec 14, 2015 at 15:30

onin's user avatar

3 Comments

2021-07-23T13:36:38.497Z+00:00

Is there a way we can wrap images into div with above code?

2021-12-03T17:38:44.807Z+00:00

2021-12-04T09:22:22.017Z+00:00

Yes. It is possible.

Html

<input type="file" accept="image/*" onchange="showMyImage(this)" /> <br/> <img id="thumbnil" style="width:20%; margin-top:10px;" src="" alt="image"/>

JS

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); } }

You can get Live Demo from here.

answered Jul 25, 2014 at 11:20

Md Rahman's user avatar

TO PREVIEW MULTIPLE FILES using jquery

$(document).ready(function(){ $('#image').change(function(){ $("#frames").html(''); for (var i = 0; i < $(this)[0].files.length; i++) { $("#frames").append('<img src="'+window.URL.createObjectURL(this.files[i])+'" width="100px" height="100px"/>'); } }); }); <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <input type="file" id="image" name="image[]" multiple /><br/> <div id="frames"></div> </body>

answered Oct 18, 2020 at 17:33

Merrin K's user avatar

2 Comments

Like: why? $(this)[0].files > this.files

2021-06-01T20:35:43.08Z+00:00

$(this)[0].files --> Gives the selected number of images or [object FileList]

2021-06-02T04:11:49.333Z+00:00

Clean and simple JSfiddle

This will be useful when you want The event to triggered indirectly from a div or a button.

<img id="image-preview" style="height:100px; width:100px;" src="" > <input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png"> <button onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button> <script type="text/javascript"> function HandleBrowseClick(hidden_input_image) { var fileinputElement = document.getElementById(hidden_input_image); fileinputElement.click(); } </script>

answered Nov 30, 2016 at 5:57

Siva Kannan's user avatar

1 Comment

Just a note: I can't take credit for this but you can use <label> and avoid javascript for handling the button click altogether. Trigger File-input with pure HTML/CSS., and it's not hacky at all.

2017-10-11T20:27:13.187Z+00:00

Example with multiple images using JavaScript (jQuery) and HTML5

JavaScript (jQuery)

function readURL(input) { for(var i =0; i< input.files.length; i++){ if (input.files[i]) { var reader = new FileReader(); reader.onload = function (e) { var img = $('<img id="dynamic">'); img.attr('src', e.target.result); img.appendTo('#form1'); } reader.readAsDataURL(input.files[i]); } } } $("#imgUpload").change(function(){ readURL(this); }); }

Markup (HTML)

<form id="form1" runat="server"> <input type="file" id="imgUpload" multiple/> </form>

Adam McKenna's user avatar

Adam McKenna

2,4656 gold badges34 silver badges43 bronze badges

answered Nov 26, 2015 at 6:33

Ratan Paul's user avatar

In React, if the file is in your props, you can use:

{props.value instanceof File && ( <img src={URL.createObjectURL(props.value)}/> )}

answered Oct 3, 2019 at 10:09

Melle's user avatar

How about creating a function that loads the file and fires a custom event. Then attach a listener to the input. This way we have more flexibility to use the file, not just for previewing images.

/** * @param {domElement} input - The input element * @param {string} typeData - The type of data to be return in the event object. */ function loadFileFromInput(input,typeData) { var reader, fileLoadedEvent, files = input.files; if (files && files[0]) { reader = new FileReader(); reader.onload = function (e) { fileLoadedEvent = new CustomEvent('fileLoaded',{ detail:{ data:reader.result, file:files[0] }, bubbles:true, cancelable:true }); input.dispatchEvent(fileLoadedEvent); } switch(typeData) { case 'arraybuffer': reader.readAsArrayBuffer(files[0]); break; case 'dataurl': reader.readAsDataURL(files[0]); break; case 'binarystring': reader.readAsBinaryString(files[0]); break; case 'text': reader.readAsText(files[0]); break; } } } function fileHandler (e) { var data = e.detail.data, fileInfo = e.detail.file; img.src = data; } var input = document.getElementById('inputId'), img = document.getElementById('imgId'); input.onchange = function (e) { loadFileFromInput(e.target,'dataurl'); }; input.addEventListener('fileLoaded',fileHandler)

Probably my code isn't as good as some users but I think you will get the point of it. Here you can see an example

Following is the working code.

<input type='file' onchange="readURL(this);" /> <img id="ShowImage" src="#" />

Javascript:

function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#ShowImage') .attr('src', e.target.result) .width(150) .height(200); }; reader.readAsDataURL(input.files[0]); } }

answered Jul 29, 2016 at 18:41

Muhammad Awais's user avatar

Try this

window.onload = function() { if (window.File && window.FileList && window.FileReader) { var filesInput = document.getElementById("uploadImage"); filesInput.addEventListener("change", function(event) { var files = event.target.files; var output = document.getElementById("result"); for (var i = 0; i < files.length; i++) { var file = files[i]; if (!file.type.match('image')) continue; var picReader = new FileReader(); picReader.addEventListener("load", function(event) { var picFile = event.target; var div = document.createElement("div"); div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" + "title='" + picFile.name + "'/>"; output.insertBefore(div, null); }); picReader.readAsDataURL(file); } }); } } <input type="file" id="uploadImage" name="termek_file" class="file_input" multiple/> <div id="result" class="uploadPreview">

answered Dec 21, 2017 at 4:44

Nisal Edu's user avatar

To Preview MULTIPLE Files and Single file in single function with reusable approach using Plain JavaScript

function imagePreviewFunc(that, previewerId) { let files = that.files previewerId.innerHTML='' // reset image preview element for (let i = 0; i < files.length; i++) { let imager = document.createElement("img"); imager.src = URL.createObjectURL(files[i]); previewerId.append(imager); } } <input accept="image/*" type='file' id="imageInput_1" onchange="imagePreviewFunc(this, imagePreview_1)" /> <div id="imagePreview_1">This Div for Single Image Preview</div> <hr /> <input class="form-control" accept="image/*" type='file' id="imageInput_2" multiple="true" onchange="imagePreviewFunc(this, imagePreview_2)" /> <div id="imagePreview_2">This Div for Multiple Image Preview</div>

answered Jan 8, 2023 at 5:19

GMKHussain's user avatar

What about this solution?

Just add the data attribute "data-type=editable" to an image tag like this:

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

And the script to your project off course...

function init() { $("img[data-type=editable]").each(function (i, e) { var _inputFile = $('<input/>') .attr('type', 'file') .attr('hidden', 'hidden') .attr('onchange', 'readImage()') .attr('data-image-placeholder', e.id); $(e.parentElement).append(_inputFile); $(e).on("click", _inputFile, triggerClick); }); } function triggerClick(e) { e.data.click(); } Element.prototype.readImage = function () { var _inputFile = this; if (_inputFile && _inputFile.files && _inputFile.files[0]) { var _fileReader = new FileReader(); _fileReader.onload = function (e) { var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value; var _img = $("#" + _imagePlaceholder); _img.attr("src", e.target.result); }; _fileReader.readAsDataURL(_inputFile.files[0]); } }; // // IIFE - Immediately Invoked Function Expression // https://stackoverflow.com/questions/18307078/jquery-best-practises-in-case-of-document-ready ( function (yourcode) { "use strict"; // The global jQuery object is passed as a parameter yourcode(window.jQuery, window, document); }( function ($, window, document) { "use strict"; // The $ is now locally scoped $(function () { // The DOM is ready! init(); }); // The rest of your code goes here! }));

See demo at JSFiddle

answered Jan 6, 2015 at 16:19

Rodolpho Brock's user avatar

Preview multiple images before it is uploaded using jQuery/javascript?

This will preview multiple files as thumbnail images at a time

Html

<input id="ImageMedias" multiple="multiple" name="ImageMedias" type="file" accept=".jfif,.jpg,.jpeg,.png,.gif" class="custom-file-input" value=""> <div id="divImageMediaPreview"></div>

Script

$("#ImageMedias").change(function () { if (typeof (FileReader) != "undefined") { var dvPreview = $("#divImageMediaPreview"); dvPreview.html(""); $($(this)[0].files).each(function () { var file = $(this); var reader = new FileReader(); reader.onload = function (e) { var img = $("<img />"); img.attr("style", "width: 150px; height:100px; padding: 10px"); img.attr("src", e.target.result); dvPreview.append(img); } reader.readAsDataURL(file[0]); }); } else { alert("This browser does not support HTML5 FileReader."); } });

Working Demo on Codepen

Working Demo on jsfiddle

I hope this will help.

answered Aug 21, 2019 at 6:55

vishpatel73's user avatar

1 Comment

could this be done in regular javascript? I'd rather not add all of jQuery for previews... as I wasn't using it to save on load times.

2021-01-19T17:34:24.437Z+00:00

<img id="blah" alt="your image" width="100" height="100" /> <input type="file" name="photo" id="fileinput" /> <script> $('#fileinput').change(function() { var url = window.URL.createObjectURL(this.files[0]); $('#blah').attr('src',url); }); </script>

answered Aug 10, 2020 at 20:03

Rachit Vohera's user avatar

I have made a plugin which can generate the preview effect in IE 7+ thanks to the internet, but has few limitations. I put it into a github page so that its easier to get it

$(function () { $("input[name=file1]").previewimage({ div: ".preview", imgwidth: 180, imgheight: 120 }); $("input[name=file2]").previewimage({ div: ".preview2", imgwidth: 90, imgheight: 90 }); }); .preview > div { display: inline-block; text-align:center; } .preview2 > div { display: inline-block; text-align:center; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js"></script> Preview <div class="preview"></div> Preview2 <div class="preview2"></div> <form action="#" method="POST" enctype="multipart/form-data"> <input type="file" name="file1"> <input type="file" name="file2"> <input type="submit"> </form>

answered Jul 27, 2015 at 6:01

Andrew's user avatar

For Multiple image upload (Modification to the @IvanBaev's Solution)

function readURL(input) { if (input.files && input.files[0]) { var i; for (i = 0; i < input.files.length; ++i) { var reader = new FileReader(); reader.onload = function (e) { $('#form1').append('<img src="'+e.target.result+'">'); } reader.readAsDataURL(input.files[i]); } } }

http://jsfiddle.net/LvsYc/12330/

Hope this helps someone.

answered Dec 16, 2017 at 14:46

Keyur's user avatar

It's my code.Support IE[6-9]、chrome 17+、firefox、Opera 11+、Maxthon3

function previewImage(fileObj, imgPreviewId) { var allowExtention = ".jpg,.bmp,.gif,.png"; //allowed to upload file type document.getElementById("hfAllowPicSuffix").value; var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase(); var browserVersion = window.navigator.userAgent.toUpperCase(); if (allowExtention.indexOf(extention) > -1) { if (fileObj.files) { if (window.FileReader) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById(imgPreviewId).setAttribute("src", e.target.result); }; reader.readAsDataURL(fileObj.files[0]); } else if (browserVersion.indexOf("SAFARI") > -1) { alert("don't support Safari6.0 below broswer"); } } else if (browserVersion.indexOf("MSIE") > -1) { if (browserVersion.indexOf("MSIE 6") > -1) {//ie6 document.getElementById(imgPreviewId).setAttribute("src", fileObj.value); } else {//ie[7-9] fileObj.select(); fileObj.blur(); var newPreview = document.getElementById(imgPreviewId); newPreview.style.border = "solid 1px #eeeeee"; newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')"; newPreview.style.display = "block"; } } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]); if (firefoxVersion < 7) {//firefox7 below document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL()); } else {//firefox7.0+  document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0])); } } else { document.getElementById(imgPreviewId).setAttribute("src", fileObj.value); } } else { alert("only support" + allowExtention + "suffix"); fileObj.value = ""; //clear Selected file if (browserVersion.indexOf("MSIE") > -1) { fileObj.select(); document.selection.clear(); } } } function changeFile(elem) { //file object , preview img tag id previewImage(elem,'imagePreview') } <input type="file" id="netBarBig" onchange="changeFile(this)" /> <img src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>

doğukan's user avatar

doğukan

28.1k15 gold badges67 silver badges79 bronze badges

answered Mar 28, 2017 at 11:28

Steve Jiang's user avatar

Default Iamge

@Html.TextBoxFor(x => x.productModels.DefaultImage, new {@type = "file", @class = "form-control", onchange = "openFile(event)", @name = "DefaultImage", @id = "DefaultImage" }) @Html.ValidationMessageFor(model => model.productModels.DefaultImage, "", new { @class = "text-danger" }) <img src="~/img/ApHandler.png" style="height:125px; width:125px" id="DefaultImagePreview"/> </div> <script> var openFile = function (event) { var input = event.target; var reader = new FileReader(); reader.onload = function () { var dataURL = reader.result; var output = document.getElementById('DefaultImagePreview'); output.src = dataURL; }; reader.readAsDataURL(input.files[0]); }; </script>

answered Jul 23, 2019 at 10:35

SHUBHASIS MAHATA's user avatar

Here's a solution if you're using React:

import * as React from 'react' import { useDropzone } from 'react-dropzone' function imageDropper() { const [imageUrl, setImageUrl] = React.useState() const [imageFile, setImageFile] = React.useState() const onDrop = React.useCallback( acceptedFiles => { const file = acceptedFiles[0] setImageFile(file) // convert file to data: url const reader = new FileReader() reader.addEventListener('load', () => setImageUrl(String(reader.result)), false) reader.readAsDataURL(file) }, [setImageFile, setImageUrl] ) const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }) return ( <div> <div {...getRootProps()}> {imageFile ? imageFile.name : ''} {isDragActive ? <p>Drop files here...</p> : <p>Select image file...</p>} <input {...getInputProps()} /> </div> {imageUrl && ( <div> Your image: <img src={imageUrl} /> </div> )} </div> ) }

answered Aug 14, 2019 at 9:59

Wooster's user avatar

https://stackoverflow.com/a/59985954/8784402

ES2017 Way

// convert file to a base64 url const readURL = file => { return new Promise((res, rej) => { const reader = new FileReader(); reader.onload = e => res(e.target.result); reader.onerror = e => rej(e); reader.readAsDataURL(file); }); }; // for demo const fileInput = document.createElement('input'); fileInput.type = 'file'; const img = document.createElement('img'); img.attributeStyleMap.set('max-width', '320px'); document.body.appendChild(fileInput); document.body.appendChild(img); const preview = async event => { const file = event.target.files[0]; const url = await readURL(file); img.src = url; }; fileInput.addEventListener('change', preview);

answered Jul 26, 2020 at 13:25

nkitku's user avatar

Here is a much easy way to preview image before upload using pure javascript;

//profile_change is the id of the input field where we choose an image document.getElementById("profile_change").addEventListener("change", function() { //Here we select the first file among the selected files. const file = this.files[0]; /*here i used a label for the input field which is an image and this image will represent the photo selected and profile_label is the id of this label */ const profile_label = document.getElementById("profile_label"); //Here we check if a file is selected if(file) { //Here we bring in the FileReader which reads the file info. const reader = new FileReader(); /*After reader loads we change the src attribute of the label to the url of the new image selected*/ reader.addEventListener("load", function() { dp_label.setAttribute("src", this.result); }) /*Here we are reading the file as a url i.e, we try to get the location of the file to set that as the src of the label which we did above*/ reader.readAsDataURL(file); }else { //Here we simply set the src as default, whatever you want if no file is selected. dp_label.setAttribute("src", "as_you_want") } });

And here is the HTML;

<label for="profile_change"> <img title="Change Profile Photo" id="profile_label" src="as_you_want" alt="DP" style="height: 150px; width: 150px; border-radius: 50%;" > </label> <input style="display: none;" id="profile_change" name="DP" type="file" class="detail form-control">

answered Nov 1, 2020 at 7:03

Irfan wani's user avatar

2 Comments

Please comment the problem with my answer.

2021-05-11T13:42:16.32Z+00:00

I used this code in a website 2 years ago, so there maybe changes. And thanks for pointing out. You can just edit my answer and regarding second problem, it seems a typo

2022-10-04T10:07:21.213Z+00:00

Here is easy way to preview image

<input type="file" name="user_profile_image_path" id="user_profile_image_path" /> <img style="height: 150px; width: 150px;" src="" class="img-select profile preview_image"> <script> $('#user_profile_image_path').on('change', function() { const file = this.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = e => $('.preview_image').attr('src', e.target.result).show(); reader.readAsDataURL(file); }); </script>

answered Aug 20, 2024 at 12:09

w.Daya's user avatar

for my app, with encryped GET url parameters, only this worked. I always got a TypeError: $(...) is null. Taken from https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } } <input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">

answered Aug 1, 2017 at 6:07

Robert TheSim's user avatar
function assignFilePreviews() { $('input[data-previewable=\"true\"]').change(function() { var prvCnt = $(this).attr('data-preview-container'); if (prvCnt) { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function(e) { var img = $('<img>'); img.attr('src', e.target.result); img.error(function() { $(prvCnt).html(''); }); $(prvCnt).html(''); img.appendTo(prvCnt); } reader.readAsDataURL(this.files[0]); } } }); } $(document).ready(function() { assignFilePreviews(); });

HTML

<input type="file" data-previewable="true" data-preview-container=".prd-img-prv" /> <div class = "prd-img-prv"></div>

This also handles case when file with invalid type ( ex. pdf ) is choosen

Mohammad's user avatar

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

answered Apr 10, 2017 at 19:25

Jinu Joseph Daniel's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.