草庐IT

javascript - javascript触发对话框打开时如何使IE8/9提交输入类型="file"

coder 2024-12-16 原文

如果我在某处有一个 input type="file"，并且在点击某个链接时它也会触发对文件输入的点击。用户选择一个文件。

在 IE8/9 中，如果用户单击 button type="submit"，第一次单击会清除文件输入中的所有数据，然后第二次提交空白表单。

如何允许提交 input type="file" 后一个 javascript 点击触发器。

一些注意事项:

  • 点击是由另一个点击事件触发的。在事件中。
  • input type="file"未设置显示:none。
  • 未尝试操纵用户输入

想法？

最佳答案

我一直在为同样的问题而苦苦挣扎，但我还没有找到一个干净的解决方案。

不过，我发现了一个解决方法。请注意以下解决方案完全无视最佳实践(以我的拙见)，如果有人有更好、更符合标准的方法，请在此处发布。

修复按钮点击事件

经过大量研究，似乎很多人都在使用一种技巧，即他们绝对定位 <input type="file" />。立即在他们的按钮上，并将不透明度设置为零。这意味着，对于用户来说，看起来他们正在点击一个按钮，但浏览器将其视为对 <input type="file" /> 的点击。 (从而避免了 IE 中提到的问题)。我很惊讶地看到Quirksmode实际上推荐了这种方法。

修复按钮样式

现在，这确实引入了更多的外观问题；您可能会发现您的按钮不再触发它们的 :hover和 :active CSS 伪类(除非您将 <input type="file" /> 放在按钮中)，并且您的鼠标光标可能是默认鼠标光标，尽管您已将任何 CSS 应用于 <input type="file" />。或您的按钮。

这些类很容易通过 JavaScript 解决方法修复(我会把它留给你)，但光标仍然是一个问题。奇怪的是，您可以设置 cursor 的样式右手path <input type="file" \> 的一侧, 但这不会影响它的 Browse按钮。不幸的是，这个(现在透明的)按钮可能会覆盖您的样式按钮的某些部分，导致默认光标悬停。

为了解决这个问题，我偶然发现了 this work-around (JSFiddle here)。基本上，有人将事件绑定(bind)到 mousemove他们按钮的事件，并定位在 <input type="file" /> 的右侧每次将鼠标悬停在按钮上时都在鼠标光标下方。这可能还需要增强一点以停止 <input type="file" />。如果按钮没有固定大小和 overflow: hidden，则不会从按钮坐标外点击设置。

结论

总的来说，我发现样式 <input type="file" />只是不值得；黑客太多了，如果你真的想让它看起来不错，你可能在某个时候不得不使用 JavaScript(如果你试图支持禁用 JavaScript 的人，那就不太好了)。我也不知道这对移动设备有何影响。

如果您的目标是支持 Html5 File API 的较新浏览器，实现 AJAX 拖放上传解决方案(here 是一个不错的解决方案)，并摆脱 <input type="file" />共。对于那些不支持它的人(旧浏览器和禁用 JavaScript 的浏览器)，只需保留无样式的 <input type="file" />那里作为后备。

关于javascript - javascript触发对话框打开时如何使IE8/9提交输入类型="file"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16114024/

开时javascriptcodeinputtypeinternet-explorerdom

有关javascript - javascript触发对话框打开时如何使IE8/9提交输入类型="file"的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  4. ruby-on-rails - rails : save file from URL and save it to Amazon S3 - 2

    从给定URL下载文件并立即将其上传到AmazonS3的更直接的方法是什么(+将有关文件的一些信息保存到数据库中，例如名称、大小等)？现在，我既不使用Paperclip，也不使用Carrierwave。谢谢 最佳答案 简单明了:require'open-uri'require's3'amazon=S3::Service.new(access_key_id:'KEY',secret_access_key:'KEY')bucket=amazon.buckets.find('image_storage')url='http://www.ex

  5. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  6. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  7. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  8. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  9. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  10. ruby CSV : How can I read a tab-delimited file? - 2

    CSV.open(name,"r").eachdo|row|putsrowend我得到以下错误:CSV::MalformedCSVErrorUnquotedfieldsdonotallow\ror\n文件名是一个.txt制表符分隔文件。我是专门做的。我有一个.csv文件，我转到excel，并将文件保存为.txt制表符分隔的文件。所以它是制表符分隔的。CSV.open不应该能够读取制表符分隔的文件吗？ 最佳答案 尝试像这样指定字段分隔符:CSV.open("name","r",{:col_sep=>"\t"}).eachdo|row|

随机推荐