Как выбрать каталог для создания текстового файла [duplicate]

Как сделать клик по тегу, щелкнуть по кнопке файла?

Для этого есть дополнительная поддержка браузера, но я использую 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" />

Используйте это.

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

Создайте элемент ввода.

. Отсутствие этих ответов заключается в том, как получить диалог файла без входного элемента на странице.

Функция для отображения диалогового окна входного файла.

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

ПРИМЕЧАНИЕ. Функция должна быть частью активации пользователя, такого как событие 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.

К сожалению, нет хорошего способа просмотра файлов с помощью JavaScript API. К счастью, легко создать ввод файла в JavaScript, привязать обработчик событий к его событию change и имитировать щелчок на нем пользователя. Мы можем сделать это без изменений самой страницы:

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

this.files во второй строке - это массив, который содержит имя файла, временные метки, размер и тип.

Я знаю, что это старый пост, но другой простой вариант - использовать тег INPUT TYPE = "FILE" в соответствии с совместимостью с большинством основных браузеров.

Вот способ сделать это без Javascript, и он также совместим с любым браузером.

EDIT: в 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">

Я работал над этим «скрывающим» div ...

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

вы не можете использовать input.click() напрямую, но вы можете вызвать это в другом событии щелчка элемента.

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

это говорит вам Использование элементов ввода скрытого файла с помощью кнопки click () метод