如何使用JavaScript打开文件/浏览对话框？
当使用javascript单击<a href>链接时，是否有任何方法可以打开浏览文件对话框？ 它应该像一个普通的文件浏览button，并提供响应中select的文件的名称/列表。
这是一个非jQuery解决scheme。 请注意，您不能只使用.click()因为某些浏览器不支持它。
<script type="text/javascript"> function performClick(elemId) { var elem = document.getElementById(elemId); if(elem && document.createEvent) { var evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, false); elem.dispatchEvent(evt); } } </script> <a href="#" onclick="performClick('theFile');">Open file dialog</a> <input type="file" id="theFile" />
用这个。
<script> function openFileOption() { document.getElementById("file1").click(); } </script> <input type="file" id="file1" style="display:none"> <a href="#" onclick="openFileOption();return;">open File Dialog</a>
这是一种不使用任何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">
不幸的是，使用JavaScript API浏览文件并不是一个好方法。 幸运的是，使用JavaScript创build文件input，将事件处理程序绑定到其change事件以及模拟用户单击它们很容易。 我们可以在不修改页面本身的情况下做到这一点：
$('<input type="file" multiple>').on('change', function () { console.log(this.files); }).click();
第二行的this.files是一个包含文件名，时间戳，大小和types的数组。
创buildinput元素。
这些答案中缺less的是如何在页面上没有input元素的情况下获得文件对话框。
显示input文件对话框的function。
function openFileDialog (accept, callback) { // this function must be called from a user // activation event (ie an onclick event) // Create an input element var inputElement = document.createElement("input"); // Set its type to file inputElement.type = "file"; // Set accept to the file types you want the user to select. // Include both the file extension and the mime type inputElement.accept = accept; // set onchange event to call callback when user has selected file inputElement.addEventListener("change", callback) // dispatch a click event to open the file dialog inputElement.dispatchEvent(new MouseEvent("click")); }
注意该function必须是用户激活的一部分，例如点击事件。 试图在没有用户激活的情况下打开文件对话框将失败。
注意在Edge中不使用
input.accept
例。
当用户点击一个锚点元素时调用上述函数。
// wait for window to load window.addEventListener("load", windowLoad); // open a dialog function function openFileDialog (accept, multy = false, callback) { var inputElement = document.createElement("input"); inputElement.type = "file"; inputElement.accept = accept; // Note Edge does not support this attribute if (multy) { inputElement.multiple = multy; } if (typeof callback === "function") { inputElement.addEventListener("change", callback); } inputElement.dispatchEvent(new MouseEvent("click")); } // onload event function windowLoad () { // add user click event to userbutton userButton.addEventListener("click", openDialogClick); } // userButton click event function openDialogClick () { // open file dialog for text files openFileDialog(".txt,text/plain", true, fileDialogChanged); } // file dialog onchange event handler function fileDialogChanged (event) { [...this.files].forEach(file => { var div = document.createElement("div"); div.className = "fileList common"; div.textContent = file.name; userSelectedFiles.appendChild(div); }); }
.common { font-family: sans-serif; padding: 2px; margin : 2px; border-radius: 4px; } .fileList { background: #229; color: white; } #userButton { background: #999; color: #000; width: 8em; text-align: center; cursor: pointer; } #userButton:hover { background : #4A4; color : white; }
<a id = "userButton" class = "common" title = "Click to open file selection dialog">Open file dialog</a> <div id = "userSelectedFiles" class = "common"></div>
您不能直接使用input.click() ，但可以在其他元素单击事件中调用此方法。
var a = document.querySelector('a'); var inpupt = document.querySelector('a'); a.addEventListener('click', function (e) { input.click(); });
这告诉你使用click（）方法使用隐藏的文件input元素
我通过这个“隐藏”的div工作
<div STYLE="position:absolute;display:none;"><INPUT type='file' id='file1' name='files[]'></div>
我知道这是一个旧的post，但另一个简单的select是使用INPUT TYPE =“FILE”标签根据大多数主stream浏览器的兼容性支持该function。
