gistfile1.js

var ImgWidget = function(){
    // Keeps "currently" up to date next to the image widget

    // HELPERS
    //////////

    var _truncate_temp_file = function(filename){
        value = filename.split('/');
        value = value[0].split('\\'); // appease windows
        value = value[value.length - 1];
        if (value.length > 25) {
            value = value.slice(0,25) + "...";
        }
        return value;
    };

    // EVENT HANDLERS
    /////////////////
    var file_selected_handler = $('body').on('change', '.wrap_file_input input[type=file]', function(event){
        var obj = $(event.target);
        var value = obj.attr('value');
        var destination = obj.parent().next('.current');
        value = _truncate_temp_file(value);
        $(destination).html(value);
    });

    return {};
}();

gistfile2.html

<span class="imgWidget">
    <b class="thumb">
        <img src="/media/thumbnails/photos/2012-03-28_10.46.25.jpg.75x75_q85.jpg">
    </b>
    <i class="context">
        <span>
            <a class="thumbTxt" href="/media/photos/2012-03-28_10.46.25.jpg">photos/2012-03-28_10</a>
        </span>
        <span>Change 
            <b class="wrap_file_input">Select File <input id="id_photo" name="photo" type="file"></b>
            <i class="current"></i>
        </span>
    </i>
</span>

From my portfolio app, an example of how to do the js side of a custom upload widget. This one is for images.

Code isn't perfect, but it does work.