qué - ¿Cómo abrir un diálogo de archivo/navegación usando javascript?

qué es el prompt en javascript

Question

¿Hay alguna forma de abrir el cuadro de diálogo de <a href> de archivos cuando se hace clic en un enlace <a href> utilizando javascript? Debería funcionar como un botón normal de búsqueda de archivos y dar los nombres / lista de archivos seleccionados en respuesta.

Answer 1

Crear elemento de entrada.

Falta de estas respuestas es cómo obtener un diálogo de archivo sin un elemento de entrada en la página.

La función para mostrar el diálogo del archivo de entrada.

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

NOTA: la función debe ser parte de una activación del usuario, como un evento de clic. Intentar abrir el diálogo de archivo sin la activación del usuario fallará.

NOTA input.accept no se usa en Edge

Ejemplo.

Llamando a la función anterior cuando el usuario hace clic en un elemento de anclaje.

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

_{Advertencia el fragmento de arriba está escrito en ES6.}

Answer 2

¿Qué tal hacer clic en la etiqueta a , hacer clic en el botón de archivo?

Hay más compatibilidad con el navegador para esto, pero uso ES6 , así que si realmente quieres que funcione en versiones anteriores y en cualquier navegador, intenta transponerlo usando babel, o simplemente usa 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 3

Aquí hay una forma de hacerlo sin Javascript y también es compatible con cualquier navegador.

EDITAR: En Safari, la input se desactiva cuando está oculta con display: none . Un mejor enfoque sería usar la position: fixed; top: -100em position: fixed; top: -100em .

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

Además, si lo prefiere, puede ir a la "forma correcta" utilizando for en la label apunta a la id de la entrada de esta manera:

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

Answer 4

Aquí hay una solución que no es jQuery. Tenga en cuenta que no puede usar .click() ya que algunos navegadores no lo admiten.

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

Desafortunadamente, no hay una buena manera de buscar archivos con una API de JavaScript. Afortunadamente, es fácil crear una entrada de archivo en JavaScript, vincular un controlador de eventos a su evento de change y simular que un usuario haga clic en él. Podemos hacer esto sin modificaciones a la página en sí:

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

this.files en la segunda línea es una matriz que contiene nombre de archivo, marcas de tiempo, tamaño y tipo.

Answer 6

Lo trabajé alrededor a través de este div "oculto" ...

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

Answer 7

Sé que esta es una publicación anterior, pero otra opción simple es utilizar la etiqueta INPUT TYPE = "FILE" de acuerdo con la compatibilidad de la mayoría de los principales navegadores.

Answer 8

Utilizar esta.

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

no puede usar input.click() directamente, pero puede invocar esto en el evento click de otro elemento.

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

esto te dice Usar elementos de entrada de archivos ocultos usando el método click ()