How to preview an image after uploaded with file input and FileReader Back

var path = '';
var FileReader = window.FileReader;
var clip = document.getElementById('imgContent');

var fileInput = document.getElementById('file');
var fileHandler = function (e) {
    if (FileReader) {
        var reader = new FileReader();
        var file = this.files[0];

        reader.onload = function (e) {
            clip.setAttribute('src', e.target.result);

            /** if you want to get width and height of this image */
            console.log('width: ' + (clip.width || clip.naturalWidth));
            console.log('height: ' + (clip.height || clip.naturalHeight));
        };

        reader.readAsDataURL(file);
    } else {
        path = e.target.value;

        if (/"\w\W"/.test(path)) {
            path = path.slice(1, -1);
        }

        clip.setAttribute('src', path);
    }
};

fileInput.addEventListener('change', fileHandler, false);

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize