跨浏览器问题。需要建议 [英] Cross Browser Issue. Need advice

查看:133
本文介绍了跨浏览器问题。需要建议的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我设计了一个输入上传框使用jquery我googled某处,问题是浏览按钮不工作(不可点击)在IE上。任何人可以看一下代码,帮助我应该做什么或调整这个工作在IE上?非常感谢。我已经在jsfiddle下载了html / css / js文件。

I designed an input upload box using jquery that i googled somewhere, problem is the "Browse" Button is not working(not clickable) on IE. Can anyone take a peek on the code and help me what i should do or tweak for this to work on IE? Thanks a lot. I've included the html/css/js files on jsfiddle bellow.

jSFiddle

推荐答案

您添加的浏览按钮在IE 7 / 9,Chrome或Firefox。您可能有不同的体验,这强化了我将尝试做的点。

The "browse" button that you added doesn't work in IE 7/8/9, Chrome, or Firefox. You may have a different experience, which reinforces the point I'll try to make.

最好使用基于Flash的文件上传来完全替换默认UI (我相信GMail仍然这样做),或者只是保留默认输入单独,丑陋/不一致,因为它可能是。有很多黑客来设计文件上传,但没有真正的解决方案(至少我遇到过)。

It's better to either use a Flash-based file upload to completely replace the default UI (I believe GMail still does this), or just leave the default input alone, ugly/inconsistent as it may be. There are many hacks to style file uploads, but no real solutions (at least that I've come across).

我发现一个纯HTML / CSS解决方案最接近的事情是在文件输入的浏览按钮的顶部覆盖一个样式的按钮,并隐藏其余的。然后我通过将整个内容放在 IFRAME 中来模仿异步功能。这个解决方案确实/仍然可以工作,但是我浪费了几个小时在视觉上调整它,添加了一堆额外的代码将 IFRAME 挂钩到包含的页面,并增加了整体的复杂性解。

The closest thing I have found to a pure HTML/CSS solution was to overlay a styled button on top of the file input's "browse" button and hide the rest of it. I then mimicked async capabilities by placing the whole thing inside of an IFRAME. This solution did/does still work but I wasted hours tweaking it visually, added a bunch of extra code to hook the IFRAME to the containing page, and increased the complexity of the overall solution. And the next update to any browser may break it.

HTML 5对文件上传过程提供了更多的灵活性(见这里),但是这样的解决方案尚未得到普遍支持,并且仍然不一定涉及审美关注。

HTML 5 does offer much more flexibility around the file upload process (see here) but such solutions aren't universally supported yet and still don't necessarily address aesthetic concerns.

拖放功能可能对您有用,因为您可以完全隐藏文件输入。您可以在较新的浏览器中使用此类解决方案,并将其降级为不支持此功能的旧版浏览器上的标准文件输入。

Drag and drop capabilities may be useful to you as you can hide the file input altogether. You may be able to use a solution like this in newer browsers and degrade to a standard file input on older browsers which do not support it.

具有渐进增强功能的另一个示例

这篇关于跨浏览器问题。需要建议的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆