自定义文件上传按钮

Question

可以提供从本地计算机选择文件的选项进一步上传。 但我想要一个自定义按钮，可以打开文件浏览器对话框 &也可以通过单击自定义按钮进一步上传。请参阅下面的示例。让我们假设

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

以下是 jQuery fn &它使按钮能够用作上传文件按钮。

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

     });
});

上面的 js 在 Windows 机器上工作，而 它在 Linux 上不起作用，为什么？ 我也知道操作系统与此无关，而浏览器对此负责。请帮我解决这个问题
Windows - - > mozila IE chrome ：工作，请检查示例

Linux 无法在任何浏览器上运行

Answer 1

如果您不需要显示文件名的栏，则效果很好:) 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 }

Answer 2

这更多地与浏览器版本有关，而不是与操作系统或浏览器品牌有关。

我相信这在 Windows 上的 Opera 中也会失败 - 因为某些浏览器会阻止在文件类型输入上触发事件。

你可以使用这个旧的 CSS 技巧 - http://www.quirksmode.org/dom/inputfile。 html

Answer 3

最近也遇到了同样的问题，看到了这个页面。 Tomas，您的回复非常好，并且在 IE8 上进行了细微调整后效果非常好。

IE8 上的问题是原始浏览按钮的浏览文本与使用按钮替换创建的新浏览文本重叠。对于遇到同样问题的人，您可以将原始上传按钮的不透明度更改为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 */
}

您可以使用另一个按钮来调用文件上传按钮的单击事件。原始文件上传按钮将保持隐藏。 我在原始文件上传按钮中重复使用了 Tomas 的类名来隐藏它。

我相信，如果您使用服务器控件，这个解决方案也会很棒（但请注意，您需要调整服务器控件的单击事件）。

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

希望这段代码会有所帮助！