Preview an image before it is uploaded

Question

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?

Note that unless you use Gears or another plugin you cannot manipulate the image inside the browser: http://code.google.com/p/chromium/issues/detail?id=32276 — Steve-o, Dec 16 '10 at 09:58
Check out this pure JavaScript approach, including its answer and there Ray Nicholus' comment for the final solution: http://stackoverflow.com/questions/16430016/using-readasdataurl-for-image-preview — Jonathan Root, Oct 17 '13 at 15:05

score 2800 · Accepted Answer · edited May 11 '21 at 10:51

2800

Please take a look at the sample code below:

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>

edited May 11 '21 at 10:51

Endless

24,091
10
82
106

answered Dec 16 '10 at 09:55

Ivan Baev

28,155
1
14
7

7

You can improve a little bit performance by define the reader once. http://jsfiddle.net/LvsYc/638/ – Jaider Sep 03 '13 at 14:45
122

Why use jQuery for ` $('#blah').attr('src', e.target.result);` when you could have simply done `document.getElementById('blah').src=e.target.result)` – EasyBB Jul 21 '14 at 19:26
6

I made a [ReactJS implementation of this](http://codepen.io/sumi1985/pen/bqRpQM). Works like a charm. @kxc you should make an ajax call and send `input.files[0]` as data, [see jQuery's doc](http://api.jquery.com/jquery.ajax/). – Sumi Straessle Mar 13 '17 at 09:07
1

@IvanBaev `input.files[0]` does not have the full path. How does FileReader locate the file? – Old Geezer Aug 30 '18 at 02:23
what if no file is choosen after upload one ?\ – TarangP Dec 15 '18 at 09:10
@EasyBB After changing the orientation of the image, how to replace it with the actual uploaded image? I am getting the old image only. – Bej May 28 '19 at 10:40

score 432 · Answer 2 · edited Mar 23 '20 at 19:13

432

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>

edited Mar 23 '20 at 19:13

Brian Burns

14,953
5
69
59

answered Nov 27 '14 at 08:17

nkron

16,078
3
31
24

10

to avoid memory issues you should call `URL.revokeObjectURL` when you are done with your blob – Apolo Nov 20 '18 at 16:09
4

@Apolo not in this case, see this answer: https://stackoverflow.com/a/49346614/2313004 – grreeenn Apr 17 '20 at 22:52
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. – Ionel Lupu Oct 08 '20 at 15:17
@Lonel Lupu - Believe my answer was incorrect! Also used `readAsDataURL` and was able to convert the base64 characters into an image. – tim-montague Oct 29 '20 at 11:05
1

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`. – tim-montague Oct 29 '20 at 11:33

cnlevy · Answer 3 · 2018-06-07T13:21:45.663

264

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

edited Jun 07 '18 at 13:21

answered Nov 18 '14 at 20:00

cnlevy

8,112
3
17
18

2

@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. – Kaiido Jul 02 '17 at 02:20
@cnlevy How can we access the files uploaded? Is it only possible to get it from the URL as you mentioned? To be specific, I'm using flask which already supports access of uploaded files. Is there some other way with this one-liner? – Abhishek Singh Dec 26 '18 at 13:16
This solution not worked for me. Image preview not showing. – Sundaramoorthy J Nov 29 '19 at 07:35
I am getting an error: "files is not defined". I am using react.js – Gilboot Sep 13 '20 at 19:07
1

Beautiful. But what about clearing memory using `URL.revokeObjectURL()`? :D – pheianox Mar 27 '21 at 07:10
1

@pheianox It depends on you, because it is not that big of a problem. "Browsers will release object URLs automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so". For more info [MDN reference](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) – Rajan Apr 01 '21 at 13:12

score 46 · Answer 4 · edited May 31 '20 at 17:29

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

Merrin K · Answer 5 · 2020-12-19T12:00:29.503

38

THIS IS THE SIMPLEST METHOD

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

edited Dec 19 '20 at 12:00

answered Jun 03 '20 at 07:36

Merrin K

792
1
7
17

1

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 https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#memory_management. – Isaac Gregson Jan 15 '21 at 21:13

score 26 · Answer 6 · answered Jun 05 '14 at 06:23

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

The Onin · Answer 7 · 2017-04-06T17:27:33.973

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.

score 16 · Answer 8 · answered Jul 25 '14 at 11:20

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.

Kamil Kiełczewski · Answer 9 · 2020-09-21T18:33:23.773

13

This is size improvement of cmlevy answer - try

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

edited Sep 21 '20 at 18:33

answered Jul 27 '20 at 16:55

Kamil Kiełczewski

53,729
20
259
241

How do you get the entire file path? – Bbb Sep 03 '20 at 15:36
@Bbb it not looks like typical path - it look like some temporary "link": `blob:null/35c35011-111c-4d9e-ac3f-a779e049eb3d` – Kamil Kiełczewski Sep 03 '20 at 16:16

Siva Kannan · Answer 10 · 2017-12-13T13:39:54.967

11

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>

edited Dec 13 '17 at 13:39

answered Nov 30 '16 at 05:57

Siva Kannan

1,442
3
20
34

Just a note: I can't take credit for this but you can use `` and avoid javascript for handling the button click altogether. [Trigger File-input with pure HTML/CSS.](https://stackoverflow.com/a/41145048/3917091), and it's not hacky at all. – Regular Jo Oct 11 '17 at 20:27

score 8 · Answer 11 · edited May 02 '17 at 12:59

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>

score 7 · Answer 12 · answered Oct 03 '19 at 10:09

7

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

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

answered Oct 03 '19 at 10:09

Melle

5,134
1
23
29

ajorquera · Answer 13 · 2014-03-21T13:28:58.853

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

score 6 · Answer 14 · answered Jul 29 '16 at 18:41

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

Merrin K · Answer 15 · 2020-10-18T17:53:13.043

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>

score 3 · Answer 16 · answered Dec 21 '17 at 04:44

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">

score 2 · Answer 17 · answered Jan 06 '15 at 16:19

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

Andrew · Answer 18 · 2015-07-27T07:23:01.850

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>

score 1 · Answer 19 · edited Jun 07 '19 at 23:01

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=""/>

score 1 · Answer 20 · answered Dec 16 '17 at 14:46

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.

score 1 · Answer 21 · answered Jul 23 '19 at 10:35

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>

vishpatel73 · Answer 22 · 2019-08-21T07:18:26.097

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.

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. — Eric Sebasta, Jan 19 '21 at 17:34

score 0 · Answer 23 · answered Aug 14 '19 at 09:59

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

nkitku · Answer 24 · 2020-10-31T10:21:16.253

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

score 0 · Answer 25 · answered Aug 10 '20 at 20:03

0

<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 '20 at 20:03

Rachit Vohera

431
5
7

score -1 · Answer 26 · answered Aug 01 '17 at 06:07

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...">

score -1 · Answer 27 · answered Nov 01 '20 at 07:03

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">

Please comment the problem with my answer. – Irfan wani May 11 '21 at 13:42 — Irfan wani, May 11 '21 at 13:42

score -2 · Answer 28 · edited Oct 28 '18 at 09:48

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

Preview an image before it is uploaded

28 Answers28

ES2017 Way

Linked

Related