Contexto seguro

Esta función solo está disponible en contextos seguros (HTTPS), en algunos o todos los navegadores compatibles.

los showOpenFilePicker() método del Window La interfaz muestra un selector de archivos que permite al usuario seleccionar un archivo o varios archivos y devuelve un identificador para los archivos.

Sintaxis

var FileSystemHandles = Window.showOpenFilePicker();

Parámetros

opcionesOpcional
Un objeto opcional que contiene opciones, que son las siguientes:

  • multiple: A Boolean. Defecto false. Cuando se establece en true se pueden seleccionar varios archivos.
  • excludeAcceptAllOption:A Boolean. Defecto false. De forma predeterminada, el selector debe incluir una opción para no aplicar ningún filtro de tipo de archivo (instigado con la opción de tipo a continuación). Configurar esta opción para true significa que la opción es no disponible.
  • types: Un Array de tipos de archivos permitidos para elegir. Cada elemento es un objeto con las siguientes opciones:
    • description: Una descripción opcional de la categoría de tipos de archivos permitidos.
    • accept: Un Object con el keys establecido en el Tipo de Mimica y los valores de un Array de extensiones de archivo (consulte un ejemplo a continuación).

Valor devuelto

A Array de FileSystemFileHandle objetos.

Excepciones

AbortError
Se genera un AbortError si un usuario descarta el mensaje sin realizar una selección o si un archivo seleccionado se considera demasiado sensible o peligroso para exponerlo al sitio web.

Ejemplos de

Aquí configuramos el objeto de opciones para pasar al método. Permitiremos una selección de tipos de archivos de imagen, sin opción para permitir todos los tipos de archivos o selección de archivos múltiples.

const pickerOpts =
  types:[
      description:'Images',
      accept:'image/*':['.png','.gif','.jpeg','.jpg'],],
  excludeAcceptAllOption:true,
  multiple:false;

A continuación, podemos crear una función asincrónica que muestre el selector de archivos y devuelva el archivo seleccionado.

// create a reference for our file handlelet fileHandle;asyncfunctiongetFile()// open file picker, destructure the one element returned array[fileHandle]=await window.showOpenFilePicker(pickerOpts);// run code with our fileHandle

Especificaciones

Especificación Estado Comentario
API de acceso al sistema de archivos
La definición de ‘showOpenFilePicker’ en esa especificación.		 Borrador de trabajo Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
showOpenFilePicker 86 86 No No 72 No No No No No No No

Ver también