Data URL Generator

by steveukx

HTML

<input type="file" />

CSS

html {
    font: 13px/1.3 "lucida sans unicode";
}

JavaScript

var $ = function(sel, base) {
    if(!(this instanceof $)) return new $(sel, base);
    if(/^</.test(sel)) {
        var div = document.createElement('div');
        div.innerHTML = sel;
        [].slice.call(div.childNodes, 0).forEach($._bind, this);
    }
    else {
        [].slice.call((base || document).querySelectorAll(sel), 0)
                                        .forEach($._bind, this);
    }
}
$._bind = function(item, index) {
    this[index] = item;
    this.length = index + 1;
};
$.prototype.on = function(eventName, handler) {
    [].forEach.call(this, function(element) {
        element.addEventListener(eventName, handler, true);
    });
    return this;
};
$.prototype.append = function(content) {
    var isElement = (typeof content != "string");
    if(content instanceof $) content = content[0];

    [].forEach.call(this, function(element) {
        isElement ? element.appendChild(content) : element.insertAdjacentHTML('beforeEnd', content);
    });
    return this;
};

$('input').on('change', function(e) {
    var file = e.target.files[0];
    var fileReader = new FileReader;
    fileReader.onload = function(e) {
        $('body').append($('<p />').append(e.target.result));
    };
    fileReader.readAsDataURL(file);
});