File API + window.createObjectURL

by FiNGAHOLiC

HTML

<input type="file" id="js-input">
<div id="js-result"></div>

JavaScript

var createObjectURL = (window.URL && window.URL.createObjectURL) ? function(file) {
    return window.URL.createObjectURL(file);
} : (window.webkitURL && window.webkitURL.createObjectURL) ? function(file) {
    return window.webkitURL.createObjectURL(file);
} : undefined;

$(function(){
    
    var $input = $('#js-input'),
        $result = $('#js-result');
    
    $input.on('change', function(e){
        var file = e.target.files[0];
        if (!file) {
            return;
        };
        var filereader = new FileReader();
        filereader.onload = function(e){
            var url = createObjectURL
                ? createObjectURL(file)
                : e.target.result,
                $img = $('<img>').on('load error', function(){
                    $result.append(this);
                }).attr('src', url);
            alert(url);
        };
        filereader.readAsDataURL(file);
    });
    
});