为什么除Opera之外的所有其他浏览器都有效？

Question

我正在使用一个脚本，用您想要的任何图像替换通常的文件上传输入，然后使用JS确保只要鼠标移动到您想要的图像上，鼠标指针下方就会出现一个不可见的“浏览”按钮使用

它适用于ie7 ie8 ie9 Firefox，Safari，Chrome但不适用于Opera。在Opera上，会出现常规文件输入。

我知道有很多脚本可以做类似的事情，但是要么它们太复杂了我无法弄清楚如何使用它们（例如uploadify）或者它们做类似的事情但只是不太好 - 比如制作自定义图像与文件输入的大小相同（也存在问题）。

Here's the script I'm using - 没有太多的东西

为什么它在Opera中不起作用。无论如何要解决它吗？除了不在Opera工作之外，这非常适合我想要的东西。

Answer 1

我玩了一些你的例子（SI.Files and example），并试图找到它在Opera中不起作用的原因。这是我“研究”的结果：

• 支票if (window.opera ||...是功能被阻止的原因。如果删除那个......
• 然后你会得到一个（以前）隐藏按钮的动态图像，它覆盖你想要显示的图像。
• 如果你完全删除了elem.parentNode.onmousemove = function(e) {...}功能，那么按钮就不会显示，但Chrome也没有显示光标......在Opera中，你现在看到光标作为输入字段的条形光标
• 如果按“按钮”，则会调用下载对话框的功能。

也许你应该看看问题"Styling an input type=“file” button"，并在那里提到工作解决方案：

• http://www.quirksmode.org/dom/inputfile.html
• http://blog.vworld.at/2008/08/21/styling-an-input-typefile-using-jquery/（如果jquery是您的选项）

Answer 2

有趣的情况，显示我不知道的Opera布局错误：如果移动了不透明度设置为0的文件输入，以便输入的文本区域部分位于父级之外，则输入将变为可见。我将报告此问题的错误并进行跟进。

要解决此问题并使脚本正常工作，您可以执行以下操作：

1. 首先删除或更改禁用脚本的Opera嗅探。找到这个：

   if（window.opera ||

   并删除window.opera ||。

2. 添加一个小的变通方法，它将更改文件输入的位置，并避免将其放置到左侧，隐藏文本区域部分并忽略不透明度。在此之前：

   this.file.style.left = x - （w - 30）+'px';

   添加以下行：

   if（window.opera＆amp;＆amp; parseFloat（opera.version（））＆gt; 11.50＆amp;＆amp;（x-（w-30）＆lt; 0））w = w / 2;

我限制它仅在Opera中运行，并且仅在11.50及更高版本中运行。原因是如果单击“文本输入”部分，大多数较旧的Opera版本都不会打开文件对话框。在少于11.50的Opera版本中，您将获得错误显示（但功能将起作用）。

我希望这可以帮助您解决这个问题。是否是面向未来的我不知道。文件输入可能会在将来看到一些变化。