如何使用javascript打開文件/瀏覽對話框？

Question

當使用 javascript 單擊<a href>鏈接時，有沒有辦法打開瀏覽文件對話框？ 它應該像普通的文件瀏覽按鈕一樣起作用，並給出響應中選擇的文件名稱/列表。

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

注意該功能必須是用戶激活（例如單擊事件）的一部分。 在沒有用戶激活的情況下嘗試打開文件對話框將失敗。

注意在 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>

_{警告上面的代碼片段是用 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 中，當使用display: none隱藏時， input被禁用。 更好的方法是使用position: fixed; top: -100em position: fixed; top: -100em 。

---

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

此外，如果您願意，可以通過在指向輸入id的label使用for來采用“正確的方式” ，如下所示：

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

Answer 6

你不能直接使用input.click() ，但你可以在其他元素的點擊事件中調用它。

html

<input type="file">
<button>Select file</button>

js

var botton = document.querySelector('button');
var input = document.querySelector('input');
botton.addEventListener('click', function (e) {
    input.click();
});

這告訴你使用 click() 方法使用隱藏文件輸入元素

Answer 7

我通過這個“隱藏”div解決了這個問題......

<div STYLE="position:absolute;display:none;"><INPUT type='file' id='file1' name='files[]'></div>

Answer 8

點擊a 標簽，點擊文件按鈕怎么樣？

對此有更多瀏覽器支持，但我使用ES6 ，所以如果你真的想讓它在舊瀏覽器和任何瀏覽器中工作，請嘗試使用 babel 轉譯它，或者只是簡單地使用ES5 ：

 const aTag = document.getElementById("open-file-uploader"); const fileInput = document.getElementById("input-button"); aTag.addEventListener("click", () => fileInput.click());

 #input-button { position: abosulte; width: 1px; height: 1px; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }

 <a href="#" id="open-file-uploader">Open file uploader</a> <input type="file" id="input-button" />

Answer 9

我知道這是一篇舊帖子，但另一個簡單的選擇是根據兼容性使用 INPUT TYPE="FILE" 標簽，大多數主要瀏覽器都支持此功能。