Question

<input type="file"/>可以选择从本地计算机中选择文件＆amp;进一步上传。但我想要一个自定义按钮，可以打开file browser dialog＆amp;通过单击自定义按钮进一步上传。请参阅下面的example。我们假设

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

以下是jQuery fn＆amp;它使按钮可以作为上传文件按钮。

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

     });
});

以上js适用于Windows机器，it doesn't work on Linux, Why?我也知道操作系统无关，浏览器负责此操作。请帮我解决这个问题 Windows - - ＆gt; mozila IE chrome： 有效，please check example

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 */
}

您可以使用另一个按钮来调用文件上传按钮的click事件。原始文件上传按钮将保持隐藏状态。 我重复使用了Tomas＆＃39;的班级名称。用于原始文件上传按钮以隐藏它。

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

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

希望这段代码有所帮助！

自定义文件上传按钮

3 个答案: