Alister West

home is where your code is ...

HTML Form Files

HTML form styling for file uploads

!/images/html-form-attachments.png!

<!-- This needs cleaning up - but you get the idea. -->
<style>
    .file {
        position: relative;
        float: left;
        height: 31px;
        width: 300px;
    }
    .file input[type=file] {
            position: absolute; width: 100%; height: 100%;
            filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;
            z-index: 2;
    }
    .file input[type=text] { position: absolute; width: 200px; top:1px }
    .file { background: url("../images/browse.png") top right no-repeat; }
    .file:hover { cursor: pointer; background-image: url("../images/browse_b.png") }
</style>

<script>
    $(function(){
        $('.file input[type=file]').change(function(){
            $(this).next('input[type=text]').val( this.value.replace('C:\\fakepath\\','') );
        });

        $('.more_files').click(function() {
            var $prev = $(this).prev('.file');
            var $clone = $prev.clone();
            $clone.find('input').val('');
            $clone.find('input[type=file]').change(function(){
                $(this).next('input[type=text]').val( this.value.replace('C:\\fakepath\\','') );
            });
            $prev.parent().append( $clone );
            return false;
        });
    });
</script>

<div style="width: 500px; padding-top: 5px; overflow: auto;">
    <div class="file">
        <input type="file" name="attachments[]">
        <input type="text" readonly="readonly">
    </div>
    <a href="#" style="float:left; padding: 6px 0 0 10px;" class="more_files">Add More Files</a>
</div>
By Alister West