像很多人一样,我想定制丑陋的 input type=file
,我知道如果没有一些黑客和/或 javascript
就无法完成 . 但是,在我的情况下,上传文件按钮仅用于上传图像( jpeg|jpg|png|gif ),所以我想知道我是否可以使用“ clickable
”图像,它将完全像输入类型文件一样(显示对话框,和提交页面上的相同$ _FILE) .
我发现了一些解决方法here和this interesting one(但不适用于Chrome = /) .
当你想为文件按钮添加一些样式时,你们做了什么?如果您有任何观点,只需点击答案按钮;)
10 回答
这对我很有用:
造型:
基本上,标签的 for 属性使它成为 clicking the label is the same as clicking the specified input .
此外,display属性设置为none使得文件输入根本不会被渲染,使其隐藏得很好 .
在Chrome中测试但根据网络应该适用于所有主流浏览器 . :)
EDIT: 在这里添加了JSFiddle:https://jsfiddle.net/c5s42vdz/
实际上它可以在纯css中完成,而且很容易......
HTML代码
CSS样式
我们的想法是将输入绝对放在标签内 . 将输入的字体大小设置为大的,这将增加“浏览”按钮的大小 . 然后使用负左/顶部属性进行一些试验和错误,将输入浏览按钮定位在标签后面 .
定位按钮时,将alpha设置为1.完成后将其设置为0(这样你就可以看到你在做什么!)
确保您在浏览器之间进行测试,因为它们都会使输入按钮的大小略有不同 .
你可以在这里看到一个例子(添加轨道按钮):http://rakmastering.com/upload/
@hardsetting提供了很好的解决方案,但我做了一些改进,使它在Windows中与Safari(5.1.7)一起使用
我使用“visibility:hidden,width:0”而不是“display:none”来表示safari问题,并在img标签中添加了“pointer-events:none”,以便在输入文件类型标签位于FORM标签时使其正常工作 . 似乎在所有主流浏览器中都适合我 . 希望它可以帮助某人 .
我会用SWFUpload或Uploadify . 他们需要Flash,但你可以毫无困难地做你想做的一切 .
除了单击实际控件之外,尝试触发"open file"对话框的任何基于
<input type="file">
的解决方法都可以随时从浏览器中删除 . (我认为在当前版本的FF和IE中,不可能以编程方式触发该事件 . )如果我明白你的意思,这是我的方法
HTML
jQuery
它非常简单你可以尝试这个:
您可以改为放置图像,并按以下方式执行:
HTML:
JQuery的:
CAVEAT :在IE9和IE10中如果你通过javascript触发文件输入中的onclick,表单会被标记为'dangerous'并且无法使用javascript进行下限,不确定是否可以提交传统 .
RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!
输入本身隐藏了CSS可见性:隐藏 .
然后你可以拥有你想要的任何元素 - 锚点或图像..当点击锚点/图像时,触发点击隐藏的输入字段 - 将出现用于选择文件的对话框 .
编辑:实际上它适用于Chrome和Safari,我只是注意到FF4Beta不是这样
Working Code:
只是隐藏输入部分,并这样做 .