Как открыть диалоговое окно файла/просмотра с помощью javascript?

Ответ 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" />

Ответ 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>

Ответ 3

Вот способ сделать это без 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">

Ответ 4

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

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

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

Ответ 5

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

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

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

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>

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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