Preview an image before it is uploaded

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?

  • Uploadcare: How to prevent losing image quality?
  • Javascript validation to insert file of specific name
  • Display upload percent through javascript just like bottom-left of chrome
  • Jasny multiple file upload with other form elements
  • Individual progress in jQuery file upload
  • Multi file upload with PHP/Javascript and no flash
  • Best way to post files asynchronously with ExtJS
  • How to upload a file with AngularJS?
  • Access denied error in IE when submitting form through javascript
  • “Valums” file uploader and method POST
  • File type is empty string when uploading from Android native browser
  • How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
  • 17 Solutions collect form web for “Preview an image before it is uploaded”

    Please take a look at the sample JS code below:

    function readURL(input) {
    
        if (input.files && input.files[0]) {
            var reader = new FileReader();
    
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
    
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    $("#imgInp").change(function(){
        readURL(this);
    });
    

    and the associated HTML:

    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>
    

    Also, you can try this sample here.

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

    One-liner solution:

    Here is a code that uses blob object URLs, which is much more efficient than data URL when loading large images (imagine adding 4M markup to your HTML page !):

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

    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

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

    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.

    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.

    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>
    

    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

    Clean and simple
    JSfiddle

    <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(input_image)
    {
        var fileinput = document.getElementById(input_image);
        fileinput.click();
    }     
    </script>
    

    This will be useful when you want a custom designed image upload button.

    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

    try this code (thanks to :http://opoloo.github.io/jquery_upload_preview/)

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="CSS/tableStyle.css">
    <link rel="stylesheet" type="text/css" href="CSS/tableStyleResponsive.css">
    
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="http://opoloo.github.io/jquery_upload_preview/assets/js/jquery.uploadPreview.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $.uploadPreview({
        input_field: "#image-upload",   // Default: .image-upload
        preview_box: "#image-preview",  // Default: .image-preview
        label_field: "#image-label",    // Default: .image-label
        label_default: "Choose File",   // Default: Choose File
        label_selected: "Change File",  // Default: Change File
        no_label: false                 // Default: false
      });
    });
    </script>
    
    <style type="text/css">
    #image-preview {
      width: 150px;
      height: 150px;
      position: relative;
      overflow: hidden;
      background-color: #ffffff;
      color: #ecf0f1;
      input {
        line-height: 200px;
        font-size: 200px;
        position: absolute;
        opacity: 0;
        z-index: 10;
      }
      label {
        position: absolute;
        z-index: 5;
        opacity: 0.8;
        cursor: pointer;
        background-color: #bdc3c7;
        width: 200px;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        text-transform: uppercase;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
      }
    }
    </style>
    
    <script type="text/javascript">
    $(document).ready(function() {
      $.uploadPreview({
        input_field: "#image-upload",
        preview_box: "#image-preview",
        label_field: "#image-label"
      });
    });
    </script>
    
    
    
    </head>
    <body>
    
    <div id="image-preview">
      <label for="image-upload" id="image-label">Choose File</label>
      <input type="file" name="image" id="image-upload" />
    </div>
    </body>
    </html>

    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>

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

    If you are using angular then do take a look at this ng-file-upload directive

    Its pretty cool.

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

    HTML

    <input type="file"  id="netBarBig"  onchange="changeFile(this)"  />
    <img  src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>
    

    javascript:

    <script>
       
    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')
    }
    
    </script>
    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