在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的bodyId或formId或bodyOrFormId或您想要的任何其他名称。
祝你好运！
可能您可能会对此感兴趣： 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"/>
