如何使用javascript打开文件/浏览对话框？

Question

当<a href>使用javascript单击链接时,有没有办法打开浏览文件对话框？它应该像普通的文件浏览按钮一样工作,并给出响应中选择的文件的名称/列表.

Answer 1

这是一个非jQuery解决方案.请注意,您不能只使用.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" />

Answer 2

用这个.

<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>

Answer 3

创建输入元素.

缺少这些答案是如何在页面上没有输入元素的情况下获取文件对话框.

显示输入文件对话框的功能.

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")); 
}

注意该功能必须是用户激活的一部分,例如单击事件.尝试在没有用户激活的情况下打开文件对话框将失败.

注意 input.accept不在Edge中使用

例.

当用户单击锚元素时调用上面的函数.

// 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>

_{警告上面的代码片段是用ES6编写的.}

Answer 4

不幸的是,没有一种使用JavaScript API浏览文件的好方法.幸运的是,可以很容易地在JavaScript中创建文件输入,将事件处理程序绑定到其change事件,并模拟用户单击它.我们可以在不修改页面本身的情况下执行此操作:

$('<input type="file" multiple>').on('change', function () {
  console.log(this.files);
}).click();

this.files 在第二行是一个包含文件名,时间戳,大小和类型的数组.

Answer 5

这是一种没有任何Javascript的方式,它也兼容任何浏览器.

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

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

另外,如果你愿意,你可以走了"正确的方式"使用for的label指向id这样输入:

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