upload image from input[type=file] using label (so without nast file element)

which works in IE 8 and that's awesome!

by dsgnr

HTML

<form method="post" enctype="multipart/form-data" action="http://example.com">
    <label for="picture">Click to upload picture</label>
    <input type="file" id="picture">
    <span id="filename"></span>
</form>

CSS

#picture {
    /*opacity: 0;
    filter: alpha(opacity=0);*/
    display:none;
    position: absolute;
    left: -9999px;
}
label {
    color: white;
    padding: 10px;
    background: blue;
    cursor: pointer;
}

JavaScript

$('#picture').change(function(e) {
    var filepath = this.value;
    var m = filepath.match(/([^\/\\]+)$/);
    var filename = m[1];
    $('#filename').text(' -> ' + filename);
    setTimeout((function(form) {
        return function() {
            form.submit();
        }
    })(this.form), 1000);
});