为什么它可以在除 Opera 之外的所有其他浏览器上运行？
我正在使用一个脚本，该脚本用您想要的任何图像替换通常的文件上传输入，然后使用 JS 确保每当鼠标移到您要使用的图像上时，鼠标指针下方就会有一个不可见的“浏览”按钮。
它适用于 ie7 ie8 ie9 Firefox、Safari、Chrome，但不适用于 Opera。在 Opera 上会出现常规文件输入。
我知道有很多脚本可以做类似的事情，但要么它们太复杂，我无法弄清楚如何使用它们（例如 uploadify），要么它们做类似的事情，但只是不那么好 - 比如使自定义图像具有相同的大小正如文件输入一样（也存在问题）。
这是我正在使用的脚本 - 没有太多内容
为什么它没有不能在 Opera 工作。有办法解决吗？除了不在 Opera 工作之外，这非常适合我想要的东西。
I'm using a script which replaces the usual file upload input with whatever image you want and then with JS makes sure that an invisible 'browse' button is underneath the mouse pointer whenever the mouse is moved over the image you want to use.
It works in ie7 ie8 ie9 Firefox, Safari, Chrome but not on Opera. On Opera the regular file input appears.
I know there are loads of scripts which do similar things, but either they are too complicated for me to figure out how to use them (eg uploadify) or they do similar things but just not as well - like making the custom image the same size as the file input would be (there's issues with that too).
Here's the script I'm using - there's not much to it
How come it doesn't work in Opera. Is there anyway to fix it? This is perfect for what I want apart from not working in Opera.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
有趣的情况是，显示了一个我没有意识到的 Opera 布局错误：如果移动不透明度设置为 0 的文件输入，使得输入的文本区域部分位于父级之外，则输入将变得可见。我将报告此问题的错误并跟进。
要解决此问题并使脚本正常工作，您可以执行以下操作：
首先删除或更改禁用脚本的 Opera 嗅探。找到这个：
如果（window.opera ||
并删除
window.opera ||。添加一个小解决方法，该解决方法将更改文件输入的位置并避免将其放置在左侧太远文本区域部分被隐藏并且不透明度被忽略在此之前：
this.file.style.left = x - (w - 30) + 'px';
添加这一行：
if(window.opera && parseFloat(opera.version())>11.50 && (x-(w-30)<0))w=w/2;
我将其限制为仅在 Opera 中运行，并且仅在 11.50 及更高版本中运行。原因是，如果您单击“文本输入”部分，大多数较旧的 Opera 版本不会打开文件对话框。在低于 11.50 的 Opera 版本中，您将得到有缺陷的显示（但该功能将起作用）。
我希望这可以帮助您解决该错误。我不知道它是否面向未来。文件输入将来可能会发生一些变化。
Interesting case, shows an Opera layout bug I wasn't aware of: if a file input with opacity set to 0 is moved so that the text area part of the input is outside of the parent, the input will become visible. I will report a bug for this issue and follow up.
To work around this and make the script work, you can do this:
First remove or alter the Opera sniffing that disables the script. Find this:
if (window.opera ||
and remove
window.opera ||.Add a small workaround that will change the positioning of the file input and avoid placing it so far to the left that the text area part is hidden and opacity is ignored. Before this:
this.file.style.left = x - (w - 30) + 'px';
Add this line:
if(window.opera && parseFloat(opera.version())>11.50 && (x-(w-30)<0))w=w/2;
I've limited that to run only in Opera, and only in 11.50 and greater. The reason is that most older Opera versions do not open the file dialog if you click the "text input" part. In Opera versions less than 11.50 you will thus get the buggy display (but the functionality will work).
I hope this helps you work around the bug. Whether it is future-proof I have no idea. The file input might see some changes in the future.
我对你的示例进行了一些操作（SI.Files 和示例）并试图找出它在 Opera 中不能（很好）工作的原因。这是我的“研究”的结果：
if (window.opera ||...是该功能完全被阻止的原因。如果你删除它......elem.parentNode.onmousemove = function(e) {...}，按钮不会显示，但 Chrome 中也不会显示光标，...在 Opera 中，您现在看到的光标是输入字段的条形光标，如果您按下“按钮”，则可能会调用 ://stackoverflow.com/questions/572768/styling-an-input-type-file-button">“设置输入类型=“文件”按钮的样式”，其中引用了工作解决方案：
I have played a little bit with your example (SI.Files and example) and tried to find the reason why it does not work (well) in Opera. Here is the result of my "research":
if (window.opera ||...is the reason why the functionality is blocked at all. If you remove that ...elem.parentNode.onmousemove = function(e) {...}completely, the button will not shown, but too, no cursor is shown in Chrome, ... and in Opera, as cursor you see now the bar cursor for an input field.Perhaps you should have a look at the question "Styling an input type=“file” button" with the references to working solutions there: