Question

我正在尝试将一些样式放在input = file aka uploader中，我很难用它，是否有一些非FLASH解决方案（可能是jquery甚至普通的javascript）？

Answer 1

这是可行的，但并不那么容易。您需要使用普通输入元素/按钮模仿文件输入，并用它覆盖原始文件输入。长话短说：http://www.quirksmode.org/dom/inputfile.html这里有jQuery插件，如this one。

Answer 2

使用clip属性将按钮与输入框分开，使用opacity: 0隐藏它，然后将其完全放在样式按钮上。

* > /**/ input[type="file"], x:-webkit-any-link {
  outline: none; 
  cursor: pointer; 
  position: absolute; 
  top:0; 
  clip: rect(0px 86px 22px 0px); /* Webkit; use 0px 222px 22px 145px for other browsers */
  z-index:2;
  opacity:0;
}

样式化输入字段可以放置在样式按钮旁边。使用事件处理程序使输入字段的显示值与所选文件名保持同步。

Answer 3

我写了一段时间回来帮助我解决这个问题。暂时没有更新，但如果您发现错误请告诉我（只需在GitHub页面上创建一个问题）。

http://github.com/topherfangio/FancyFile

Answer 4

我认为这个Quirksmode页面可能有你的解决方案：http://www.quirksmode.org/dom/inputfile.html

我认为CSS是你最好的选择。

Answer 5

我写了一个名为jfancyfile的jQuery插件，旨在做到这一点。

它比其他所有解决方案更有效，因为允许使用任何尺寸作为按钮。

我认为必须开发的东西，因为我在网上找不到这个。

警告：尚未对所有网络浏览器进行测试！

输入样式=文件作为按钮

5 个答案: