Custom file Upload Button

问题:

<input type="file"/> can give an option to select the file from local machine & upload further. But i wanted a customized button which enables to open the file browser dialog & further upload by clicking on customized button too. please see below the example. Let us assume

<input type="file" id="file-upload"  />  /* file upload */
<input type="button" id="customized"  />  /* simple button */ 

following is the jQuery fn & it enables the button to works as upload file button.

$(function(){
    $('#customized').click(function() {  /* cutomized button clicked */
               $('#file-upload').click();  /* Now file upload button auto clicked & file browser dialog opens. */

     });
});

above js works on Windows machine while it doesn't work on Linux, Why? also i know OS has nothing to do and Browser is responsible for this. Please help me to sort out this problem
Windows - - > mozila IE chrome : works, please check example

Linux not working on any browser

回答1:

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

回答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: #ddd;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 }

回答3:

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!