自定义file uploadbutton

<input type="file"/>可以select从本地机器上select文件并进一步上传。 但我想要一个定制的button,使打开file browser dialog并进一步上传也点击自定义button。 请看下面的例子 。 让我们假设

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

以下是jQuery的fn&它使button作为上传文件button。

 $(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?it doesn't work on Linux, Why? 另外我知道操作系统无关,浏览器是负责这一点。 请帮我解决这个问题
Windows – – > mozila IE工作, 请检查示例

Linux 不能在任何浏览器上工作

这是更多的浏览器版本,而不是操作系统或浏览器使。

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

你可以做这个旧的CSS技巧,而不是 – http://www.quirksmode.org/dom/inputfile.html

如果你不需要显示文件名的酒吧,这工作正常:) 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 } 

最近有同样的问题,看到这个页面。 托马斯你的回复是伟大的,工作得很好,对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的类名作为原始文件上传按钮来隐藏它。

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

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

希望这个代码将帮助!