File API

by FiNGAHOLiC

HTML

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

JavaScript

$(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 = e.target.result,
                $img = $('<img>').on('load error', function(){
                    $result.append(this);
                }).attr('src', url);
            alert(url);
        };
        filereader.readAsDataURL(file);
    });
    
});