在JavaScript中打开文件对话框

我需要一个解决scheme来显示在HTML中打开文件对话框,同时点击一个div 。 单击div时打开的文件对话框必须打开。

我不想将input文件框显示为HTML页面的一部分。 它必须显示在单独的对话框中,而不是网页的一部分。

这是一个很好的

优秀的上传者演示

它是一个<input type='file' />控件本身。 但是一个div放在那个和CSS样式应用来获得这种感觉。 文件控件的不透明度设置为0,因此在单击div时显示对话框窗口打开。

  $("#logo").css('opacity','0'); $("#select_logo").click(function(e){ e.preventDefault(); $("#logo").trigger('click'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

我不知道为什么没有人指出这一点,但这是一个没有任何Javascript的做法,它也与任何浏览器兼容。


编辑:在Safari中, input被隐藏时禁用display: none 。 更好的方法是使用position: fixed; top: -100em position: fixed; top: -100em


 <label> Open file dialog <input type="file" style="position: fixed; top: -100em"> </label> 

如果你喜欢,你可以通过在label使用“正确的方式”来指向input的id ,如下所示:

 <label for="inputId">file dialog</label> <input id="inputId" type="file" style="position: fixed; top: -100em"> 

其实,你不需要透明度,可视性, <input>样式等所有东西。只要看看:

 <a href="#">Just click me.</a> <script type="text/javascript"> $("a").click(function() { // creating input on-the-fly var input = $(document.createElement("input")); input.attr("type", "file"); // add onchange handler if you wish to get the file :) input.trigger("click"); // opening dialog return false; // avoiding navigation }); </script> 

演示jsFiddle 。 在Chrome 30.0和Firefox 24.0中testing。 然而,在Opera 12.16中没有工作。

这是最适合我的(testingIE8,FF,Chrome,Safari)。

 #file-input { cursor: pointer; outline: none; position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; filter: alpha(opacity=0); /* IE < 9 */ opacity: 0; } .input-label { cursor: pointer; position: relative; display: inline-block; } 
 <label for="file-input" class="input-label"> Click Me <!-- Replace with whatever text or icon you wish to use --> <input type="file" id="file-input"> </label> 

如果javascript在客户端计算机上closures,该怎么办? 所有情况下使用以下解决scheme。 你甚至不需要JavaScript / jQuery。 :

HTML

 <label for="fileInput"><img src="File_upload_Img"><label> <input type="file" id="fileInput"></label> 

CSS

 #fileInput{opacity:0} body{ background:cadetblue; } 

说明: for="Your input Id" 。 通过HTML默认触发点击事件。 所以默认触发点击事件,不需要jQuery / javascript。 如果简单的HTML为什么使用jQuery / jScript? 而你不能告诉客户是否禁用JS。 即使JSclosures,您的function应该工作。

工作jsFiddle (你不需要JS,jQuery)

首先添加标记:

 <script> function showDialog(openFileDialog) { document.getElementById(openFileDialog).click(); } function fileName(openFileDialog) { return document.getElementById(openFileDialog).value; } function hasFile(openFileDialog) { return document.getElementById(openFileDialog).value != ""; } function fileNameWithoutFakePath(openFileDialog) { var fileName = document.getElementById(openFileDialog).value; return fileName.substr(fileName.lastIndexOf('\\') + 1); } function fakePathWithoutFileName(openFileDialog) { var fileName = document.getElementById(openFileDialog).value; return fileName.substr(0, fileName.lastIndexOf('\\')); } </script> 

如果您已经有脚本标记,只需在上面添加这些function即可。

在你的身体表单标签中添加:

 <input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/> 

无论你在html中的哪个地方, 就像你已经创build了一个types为OpenFileDialog类的新实例作为全局variables,其名称是元素的id ,不pipe在你的代码或xaml的哪个位置, 而是在你的脚本或代码中,你不能input他的名字,然后读取一个属性或调用一个函数,因为有全局函数可以做那些在元素input type =“file”中没有定义的函数。 您只需要将这些函数的隐藏inputtype =“file”作为string的OpenFileDialog实例的名称。

为了减轻你的生活在创build打开文件对话框实例到你的HTML,你可以做一个function:

 function createAndAddNewOpenFileDialog(name) { document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>" } 

如果你想删除打开的文件对话框,那么你可以使用和使用以下function:

 function removeOpenFileDialog(name) { var html = document.getElementById("yourBodyOrFormId").innerHtml; html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", ""); document.getElementById("yourBodyOrFormId").innerHtml = html; } 

但是在删除打开的文件对话框之前,通过制作和使用以下函数确保它存在:

 function doesOpenFileDialogExist(name) { return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1 } 

如果你不想在html中创build和添加打开的文件对话框或表单标签,因为这是添加隐藏的input type =“file”,那么你可以在脚本中使用上面的create函数:

 function yourBodyOrFormId_onload() { createAndAddNewOpenFileDialog("openFileDialog1"); createAndAddNewOpenFileDialog("openFileDialog2"); createAndAddNewOpenFileDialog("openFileDialog3"); createAndAddNewOpenFileDialog("File Upload"); createAndAddNewOpenFileDialog("Image Upload"); createAndAddNewOpenFileDialog("bla"); //etc and rest of your code } 

确保靠近你的身体或表单标签,你补充说:

 onload="yourBodyOrFormId_onload()" 

如果你已经做到了,你不必在上面做这一行。

提示:您可以添加到您的项目或网站的新的JScript文件,如果你还没有,在这个文件中,你可以把所有打开的文件对话框function远离脚本标签和HTML或网页forms页面,并使用他们在你的HTML或Web窗体页面从这个JScript文件,但不要忘记之前将HTML或Web窗体页面链接到JScript文件当然。 您只需将JScript文件拖到标记中的html页面即可。 如果你的页面是web表单而不是简单的html,而你没有head标签,那就把它放在任何地方,这样它就可以工作。 不要忘记在该JScript文件中定义全局variables,其值将是stringforms的身体或表单ID。 在将JScript文件链接到HTML或Web表单页面之后,可以加载您的表单主体的事件,将该variables的值设置为您的主体或表单标识。 然后在JScript文件中,您不必再向文档提供一个页面的正文或表单的ID,只需将该variables的值赋予该文档即可。 您可以调用该variables的bodyIdformIdbodyOrFormId或您想要的任何其他名称。

祝你好运!

可能您可能会对此感兴趣: http : //code.google.com/p/upload-at-click/

点击元素将打开“打开文件”对话框

运行自定义function。

AFAIK你还需要一个<input type="file">元素,那么你可以使用一些quirksmode的东西来devise它

唯一没有<input type="file">是通过在div上embedded透明的flashanimation。 然后,您可以使用用户生成的点击事件(符合Flash 10新安全规则)来触发对Flash的FileReference.browse的调用。

它提供了一个额外的依赖quirksmode的方式,但作为回报,你会得到更多的事件(如内置的进度事件)。

最简单的方法是:

 #fileInput { display: none; } 
 <label for="fileInput"> <div>Click this div and select a file</div> </label> <input type="file" id="fileInput"/>