Custom file Upload Button

Question

can give an option to select the file from local machine & upload further. But i wanted a customized button which enables to open

Answer 1

Having the same issue as well recently and saw this page. Tomas your reply is great and worked very well with minor adjustment on IE8.

The issue on IE8 is the browse text of the original browse button overlaps with the new one created using the button replacement. For those experiencing the same issue, you could change the opacity of the original upload button to 0:

.original-upload-button {
    position: absolute;
    top:0;
    left:0;
    width: 9999%;
    margin-left: -9899%;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";/* IE 8 */
    filter: alpha(opacity=0);/* IE 5-7 */
    -moz-opacity: 0;/* Netscape */
    -khtml-opacity: 0;/* Safari 1.x */
    opacity: 0;/* Good browsers */
}

You could use another button that will call the click event of the file upload button. The original file upload button will remain hidden. I reused the class name of Tomas' for the original file upload button to hide it.

I believe this solution would also be great if you are using server controls (but note that you need to tweak the binding of the click event of the server control).

http://jsfiddle.net/shiego926/X98yp/

Hope this code will help!

Answer 2

If you don't need the bar which shows file name, this works fine:) http://jsfiddle.net/fxfPL/

.replaced-upload-button {
    display: inline-block;
    position:relative;
    overflow:hidden;
    /*for looks only*/background: #ffffd;padding: 5px; border: 1px solid #3d3d3d;
}

/*for looks only*/.replaced-upload-button:hover { background: orangered; color: #fff; }

.original-upload-button {
    position: absolute;
    top:0;
    left:0;
    width: 9999%;
    margin-left: -9899%;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */
    filter: alpha(opacity=50);/* IE 5-7 */
    -moz-opacity: 0.5;/* Netscape */
    -khtml-opacity: 0.5;/* Safari 1.x */
    opacity: 0.5;/* Good browsers */
}

.original-upload-button:hover { cursor: pointer }

Answer 3

This is more to do with the browser version rather than the OS or Browser make.

I believe this would also fail in Opera on Windows - as some browsers prevent the firing of events on a file-type input.

You could do this old CSS trick instead - http://www.quirksmode.org/dom/inputfile.html