W3 Lessons: HTML Form design

Saturday, June 9, 2012

Custom File upload control jQuery

Making Stylish HTML Form file input control in designing part of Web Layout was create browser compatibility issues and upload problems. Customizing Form Input Control using following jQuery technique.

jquery.fileControl.js

(function($) {
    
    $.fn.fileControl = function(options) {
                
        /* TODO: This should not override CSS. */
        var settings = {
            width : 250
        };
                
        if(options) {
            $.extend(settings, options);
        };
                        
        return this.each(function() {
            
            var self = this;
            var wrapper = $("<div>")
                            .css({
                                "width": settings.imagewidth + "px",
                                "height": settings.imageheight + "px",
                                "background": "url(" + settings.image + ") 0 0 no-repeat",
                                "background-position": "right",
                                "display": "inline",
                                "position": "absolute",
                                "overflow": "hidden"
                            });
                            
            var filename = $('<input class="file">')
                             .addClass($(self).attr("class"))
                             .css({
                                 "display": "inline",
                                 "width": settings.width + "px"
                             });

            $(self).before(filename);
            $(self).wrap(wrapper);

            $(self).css({
                        "position": "relative",
                        "height": settings.imageheight + "px",
                        "width": settings.width + "px",
                        "display": "inline",
                        "cursor": "pointer",
                        "opacity": "0.0"
                    });

            if ($.browser.mozilla) {
                if (/Win/.test(navigator.platform)) {
                    $(self).css("margin-left", "-142px");                    
                } else {
                    $(self).css("margin-left", "-168px");                    
                };
            } else {
                $(self).css("margin-left", settings.imagewidth - settings.width + "px");                
            };

            $(self).bind("change", function() {
                filename.val($(self).val());
            });
      
        });
        

    };
    
})(jQuer
fileControl

FileControl.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Custom File Upload Control - W3Lessons.com</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.filecontrol.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// Custom File Input Control
 $("input.attachment").fileControl({ 
 image: "browse_btn.png",
 imageheight : 39,
 imagewidth : 128,
 width : 175,
 height:40,
 marginleft:0
 });
 
 })



</script>
<style type="text/css">
body,td,th {
 color: #D3BCA7;
}
body {
 background-color: #333;
}

.attachment, .attach
{
 padding:10px;
 margin-bottom:5px;
}
</style>
</head>

<body>

<form method="post" enctype="multipart/form-data">
<input type="file" class="attachment" /><br />
<input type="file" class="attachment" /><br />
<input type="file" class="attachment" /><br />
<input type="submit" class="attach" value="Upload" />
</form>

</body>
</html>

Copy Button Image