在JavaScript中我可以编程一个文件input元素的“点击”事件编程？
我想以编程方式在<input type="file">标签上点击事件触发器。
只是调用click（）似乎没有做任何事情，至less它不会popup一个文件select对话框。
我一直在尝试使用监听器来捕获事件并redirect事件，但是我一直没有能够得到这个实际执行的事件，就像有人点击它。
你不能在所有的浏览器中这样做，据说IE 确实允许它，但Mozilla和Opera不这样做。
当你在GMail中编写消息的时候，“附加文件”function是以IE和任何支持这种方式的浏览器的方式实现的，然后以另一种方式实现Firefox和那些不支持的浏览器。
我不知道为什么你不能这样做，但是有一件事情存在安全风险，而且你不允许在任何浏览器中做的事情是以编程方式在HTML文件元素上设置文件名。
我一直在寻找解决这一整天。 这些是我所得出的结论：
- 出于安全原因，Opera和Firefox不允许触发文件input。
- 唯一方便的select是创build一个“隐藏的”文件input（使用不透明，而不是“隐藏”或“显示：无”！），然后在它下面创buildbutton。 通过这种方式可以看到button，但用户点击它实际上激活了文件input。
希望这可以帮助！ 🙂
<div style="display: block; width: 100px; height: 20px; overflow: hidden;"> <button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button> <input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0); position: relative; top: -40px;; left: -20px" /> </div>
您可以在任何浏览器上触发click（），但某些浏览器需要该元素可见并聚焦。 这是一个jQuery的例子：
$('#input_element').show(); $('#input_element').focus(); $('#input_element').click(); $('#input_element').hide();
它在click()之前和hide一起工作，但是我不知道它是否在没有调用show方法的情况下工作。 从来没有尝试过这个Opera，我在IE / FF / Safari / Chrome上testing，它的工作原理。 我希望这会有所帮助。
这是可能的：在FF4 +，歌剧？，铬：但：
-
inputElement.click()应该从用户行为上下文中调用！ （不是脚本执行上下文） -
（
inputElement.style.display !== 'none'）（你可以用可见性或其他东西隐藏它，但不能显示属性）
对于那些理解你必须在链接上覆盖一个看不见的forms，但又懒得写的人，我写给你。 那么，对我来说，但不妨分享一下。 欢迎评论。
HTML（某处）：
<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>
HTML（某处你不关心）：
<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;"> <form method="POST" enctype="multipart/form-data"> <input type="file" name="file" /> </form> </div>
JavaScript的：
function pageY(el) { var ot = 0; while (el && el.offsetParent != el) { ot += el.offsetTop ? el.offsetTop : 0; el = el.offsetParent; } return ot; } function pageX(el) { var ol = 0; while (el && el.offsetParent != el) { ol += el.offsetLeft ? el.offsetLeft : 0; el = el.offsetParent; } return ol; } function fileMove() { if (navigator.appName == "Microsoft Internet Explorer") { return; // Don't need to do this in IE. } var link = document.getElementById("fileLink"); var form = document.getElementById("uploadForm"); var x = pageX(link); var y = pageY(link); form.style.position = 'absolute'; form.style.left = x + 'px'; form.style.top = y + 'px'; } function fileBrowse() { // This works in IE only. Doesn't do jack in FF. :( var browseField = document.getElementById("uploadForm").file; browseField.click(); }
试试这个解决scheme： http : //code.google.com/p/upload-at-click/
如果您希望click方法在Chrome，Firefox等上运行，请将以下样式应用于您的input文件。 这将是完全隐藏的，就像你做一个display: none;
#fileInput { visibility: hidden; position: absolute; top: 0; left: -5000px; }
就是这么简单，我testing过了！
$(document).one('mousemove', function() { $(element).trigger('click') } );
当我遇到类似的问题时为我工作，这是一个普通的eRube Goldberg。
有用 ：
出于Firefox和Opera的安全考虑，您不能点击文件input，但可以使用MouseEvents进行模拟：
<script> click=function(element){ if(element!=null){ try {element.click();} catch(e) { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null); element.dispatchEvent(evt); } } }; </script> <input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">
我用jQuery和jQuery-ui的Safari解决scheme：
$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');
工作解决scheme
让我添加到这个旧的职位，我曾经使用的工作解决scheme，大概80％或更多的所有浏览器新旧两种。
解决scheme非常复杂而简单。 第一步是使用CSS，并将input文件types伪装成带有不透明度为0的“under-elements”。下一步是使用JavaScript根据需要更新其标签。
HTML 如果您想快速访问某个特定元素，则只需简单地插入这些ID，然而，这些类是必须的，因为它们与设置整个过程的CSS相关
<div class="file-input wrapper"> <input id="inpFile0" type="file" class="file-input control" /> <div class="file-input content"> <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label> <input id="inpFileButton0" type="button" class="file-input button" value="Select File" /> </div> </div>
CSS 请记住，着色和字体样式等完全是你的偏好，如果你使用这个基本的CSS，你可以随时使用后端标记风格，这是显示在最后列出的jsFiddle。
.file-test-area { border: 1px solid; margin: .5em; padding: 1em; } .file-input { cursor: pointer !important; } .file-input * { cursor: pointer !important; display: inline-block; } .file-input.wrapper { display: inline-block; font-size: 14px; height: auto; overflow: hidden; position: relative; width: auto; } .file-input.control { -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; height: 100%; position: absolute; text-align: right; width: 100%; z-index: 2; } .file-input.content { position: relative; top: 0px; left: 0px; z-index: 1; } .file-input.output { background-color: #FFC; font-size: .8em; padding: .2em .2em .2em .4em; text-align: center; width: 10em; } .file-input.button { border: none; font-weight: bold; margin-left: .25em; padding: 0 .25em; }
JavaScript 纯粹和真实的，但是，一些OLDER（退休）的浏览器可能仍然有麻烦（如Netscrape 2！）
var inp = document.getElementsByTagName('input'); for (var i=0;i<inp.length;i++) { if (inp[i].type != 'file') continue; inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0]; inp[i].onchange /*= inp[i].onmouseout*/ = function () { this.relatedElement.innerHTML = this.value; }; };
工作jsFiddle例子
我知道这是旧的，所有这些解决scheme都围绕浏览器的安全防范与真正的价值。
也就是说，截至今天，fileInput.click（）在当前的Chrome（36.0.1985.125 m）和当前的Firefox ESR（24.7.0）中工作，但不在当前的IE（11.0.9600.17207）中。 在一个button之上覆盖一个不透明度为0的文件字段，但是我想要一个链接元素作为可见的触发器，hover下划线在任何浏览器中都不起作用。 它闪烁然后消失，可能浏览器是否考虑hover样式实际上是否适用。
但是我find了适用于所有浏览器的解决scheme。 我不会声称已经testing过每个浏览器的每个版本，或者我知道它会继续工作，但现在似乎满足了我的需求。
这很简单：将文件input框放置在屏幕外（位置：绝对;顶部：-5000px），在其周围放置一个标签元素，并触发标签上的点击，而不是文件字段本身。
请注意，链接不需要脚本来调用标签的点击方法，它不会自动执行，就像点击标签元素中的文本一样。 显然链接元素捕获点击，并没有通过标签。
还要注意，这不提供显示当前所选文件的方式，因为该字段在屏幕外。 我想在select文件时立即提交，这对我来说不是问题，但是如果情况不同，则需要采取一些不同的方法。
JS小提琴： http : //jsfiddle.net/eyedean/1bw357kw/
popFileSelector = function() { var el = document.getElementById("fileElem"); if (el) { el.click(); } }; window.popRightAway = function() { document.getElementById('log').innerHTML += 'I am right away!<br />'; popFileSelector(); }; window.popWithDelay = function() { document.getElementById('log').innerHTML += 'I am gonna delay!<br />'; window.setTimeout(function() { document.getElementById('log').innerHTML += 'I was delayed!<br />'; popFileSelector(); }, 1000); };
<body> <form> <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" /> </form> <a onclick="popRightAway()" href="#">Pop Now</a> <br /> <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a> <div id="log">Log: <br /></div> </body>
有很多方法可以将事件redirect到控件，但是不要指望能够轻松地将事件触发到消防控制器上，因为浏览器会出于安全原因而试图阻止事件。
如果你只需要文件对话框来显示用户点击的东西，比方说，因为你想要更好的file uploadbutton，那么你可能想看看肖恩·英曼提出了什么 。
我已经能够实现键盘触发，创造性地将焦点转移到keydown，keypress和keyup事件之间的控制中。 因人而异。
我真诚的build议是把这个单独留下，因为这是一个浏览器不兼容的痛苦世界。 次要的浏览器更新也可能会阻止技巧，而不必警告，你可能不得不重新发明黑客来保持它的工作。
我之前就在研究这个，因为我想创build一个自定义button来打开文件对话框并立即开始上传。 我只是注意到一些可能使这成为可能的东西 – 当你点击上传的任何地方时，Firefox似乎打开对话框。 所以下面可能会这样做：
- 创build一个file upload和一个单独的元素，其中包含您想要用作button的图像
- 安排他们重叠，使文件元素背景和边框透明，使button是唯一可见的东西
- 当点击button/文件input时，添加javascript使IE打开对话框
- select文件时，使用onchange事件提交表单
这只是理论上的，因为我已经使用另一种方法来解决问题，但它可能工作。
这段代码适用于我。 这是你正在尝试做什么？
<input type="file" style="position:absolute;left:-999px;" id="fileinput" /> <button id="addfiles" >Add files</button> <script language="javascript" type="text/javascript"> $("#addfiles").click(function(){ $("#fileinput").click(); }); </script>
只需使用一个标签标签，这样你可以隐藏input，并通过其相关标签工作https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label
现在在Firefox 4中可以实现这个function，但需要注意的是，它会被视为一个popup窗口，因此只要popup窗口就会被阻止。
这里是为我工作的解决scheme： CSS：
#uploadtruefield { left: 225px; opacity: 0; position: absolute; right: 0; top: 266px; opacity:0; -moz-opacity:0; filter:alpha(opacity:0); width: 270px; z-index: 2; } .uploadmask { background:url(../img/browse.gif) no-repeat 100% 50%; } #uploadmaskfield{ width:132px; }
带有“小”JQuery帮助的HTML：
<div class="uploadmask"> <input id="uploadmaskfield" type="text" name="uploadmaskfield"> </div> <input id="uploadtruefield" type="file" onchange="$('#uploadmaskfield').val(this.value)" >
只要确认maskcompressed被真正的上传领域所覆盖。
我有一个隐藏的<input type="button">标签。 我所做的是将"onClick"事件附加到任何types的任何可见组件，如标签。 这是通过使用右键单击“编辑HTML”命令，使用Google Chrome的开发人员工具或Mozilla Firefox的Firebug完成的。 在这个事件中指定下面的脚本或类似的东西：
如果你有JQuery：
$('#id_of_component').click();
如果不：
document.getElementById('id_of_component').click();
谢谢。
您可以根据<a>标签上的“打开文件”对话框中的答案来执行此操作
<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" multiple /> <a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>
希望这可以帮助别人 – 我花了2个小时对我的头撞了一下：
在IE8或IE9中，如果你用任何方式触发用javascript打开一个文件input（相信我，我已经尝试过），它不会让你提交表单使用JavaScript，它只会默默地失败。
通过常规提交button提交表单可能会工作，但调用form.submit（）; 会默默地失败。
我不得不求助于覆盖我的select文件button与一个透明的文件input工作。
这对我工作：
<script> function sel_file() { $("input[name=userfile]").trigger('click'); } </script> <input type="file" name="userfile" id="userfile" /> <a href="javascript:sel_file();">Click</a>
这不是不可能的：
var evObj = document.createEvent('MouseEvents'); evObj.initMouseEvent('click', true, true, window); setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);
但不知何故，只有当这是一个通过点击事件调用的函数时才有效。
所以你可能有以下设置：
HTML：
<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div> <input type="file" id="input_img">
JavaScript的：
function openFileChooser() { var evObj = document.createEvent('MouseEvents'); evObj.initMouseEvent('click', true, true, window); setTimeout(function() { document.getElementById('input_img').dispatchEvent(evObj); },100); }
这是纯粹的JavaScript解决这个问题。 适用于所有浏览器
<script> function upload_image_init(){ var elem = document.getElementById('file'); if(elem && document.createEvent) { var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, false); elem.dispatchEvent(evt); } } </script>
您可以使用
<button id="file">select file</button> <input type="file" name="file" id="file_input" style="display:none;"> <script> $('#file').click(function() { $('#file_input').focus().trigger('click'); }); </script>
嘿这个解决scheme工 下载我们应该使用MSBLOB
$scope.getSingleInvoicePDF = function(invoiceNumberEntity) { var fileName = invoiceNumberEntity + ".pdf"; var pdfDownload = document.createElement("a"); document.body.appendChild(pdfDownload); AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) { var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'}); if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser window.navigator.msSaveBlob(fileBlob, fileName); } else { // for other browsers var fileURL = window.URL.createObjectURL(fileBlob); pdfDownload.href = fileURL; pdfDownload.download = fileName; pdfDownload.click(); } }); };
对于AngularJS甚至是正常的javascript。
我发现，如果input（文件）是外部forms，然后触发点击事件调用文件对话框。
