Ejemplo de código para leer archivos locales en JavaScript

¿Cómo se puede previsualizar archivos locales en el extremo del navegador?

El tema de hoy es la previsualización de archivos locales en el navegador.

Debido a las limitaciones de las políticas de seguridad del navegador, los programas JavaScript no pueden acceder libremente a los recursos locales, esto es un principio que debe cumplirse para la seguridad de la información del usuario. Si los programas JavaScript en línea pudieran acceder libremente a los recursos locales del host del usuario, los usuarios del navegador no tendrían seguridad alguna. A pesar de esta limitación de seguridad, el navegador aún puede acceder a los recursos locales cuando se obtiene el permiso del usuario.

El método para obtener el permiso del usuario es permitir que el usuario elija manualmente el archivo mediante una etiqueta, este proceso es el proceso de otorgamiento de permisos de acceso del usuario. Luego, utilizando el objeto File obtenido a través de URL.createObjectURL(file), se puede convertir a la url del archivo y se puede pasar a etiquetas similares a img, video, audio, etc. He encapsulado la función de convertir archivos locales a url en una clase.

function LocalFileUrl(){
 var _this = this;
 this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
 $("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>");
 this.urls = [];
 var _this = this;
 $("#" + this.input_id).change(function(e){
  console.log("change");
  //Si _this.urls no está vacío, libera la url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url);//Una vez liberado, ya no se podrá usar los recursos de esta url
   });
   _this.urls = [];
  }
  $(this.files).each(function(index, file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url: url, file: file});
  });
  typeof _this.getted == 'function' && _this.getted(_this.urls);
 )
}
/*
Descripción de los parámetros: getted: function(urls){}
urls es un array de objetos de URL. [url]
url = {
url:url, //URL del archivo seleccionado
file:file //Referencia del objeto de archivo seleccionado
}
*/
LocalFileUrl.prototype.getUrl = function(getted){
 this.getted = getted;
 $("#"+ this.input_id).click();
}

Método de uso:

var localFileUrl = new LocalFileUrl();//Instancia el objeto
//Dispara la lectura, abre el cuadro de selección de archivos y escucha el evento de selección de archivos.  
localFileUrl.getUrl(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+índice+"----"+item.url+"</div>")
 )
)

Reescribe usando el objeto de promesa de jQuery

Esta manera tiene la ventaja de poder usar la notación de cadenas concatenadas y de poder estar vinculado varios eventos de tratamiento done, en el orden de enlace.

function LocalFileUrl(){
 this.dtd ={};
 this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
 $("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>");
 this.urls = [];
 var _this = this;
 $("#" + this.input_id).change(function(e){
  //Si _this.urls no está vacío, libera la url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url);//Una vez liberado, ya no se podrá usar los recursos de esta url
   });
   _this.urls = [];
  }
  $(this.files).each(function(index, file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url: url, file: file});
  });
  //Se transmite un array de parámetros opcionales
  _this.dtd.resolveWith(window, new Array(_this.urls));
 )
}
/*
Devuelve un objeto de promesa de jQuery, que puede estar vinculado al evento done(). done(urls) recibe un array de urls
{'}}
 url:url,
 file:file// Objeto de archivo seleccionado
}
*/
LocalFileUrl.prototype.getUrl = function(){
 this.dtd = $.Deferred();
 $("#"+ this.input_id).click();
 return this.dtd.promise();
}

Uso

var localFilrUrl = new LocalFileUrl();
// Enlazar evento done
localFileUrl.getUrl().done(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+índice+"----"+item.url+"</div>")
 )
}).done(function(){
 console.log("Completado");
}).done(function(){
 alert("Se ha leído la ruta del archivo local");
)

Compatibilidad

URL.createObjectURL(File/(Blob) es una función experimental.IE10y versiones posteriores son compatiblesLa función correspondiente es URL.revokeObjectURL(url), que se utiliza para informar al navegador de que ya no se necesita la referencia a esta URL, puede liberarla. Una vez llamada, esta URL se inválida inmediatamente.

Declaración: el contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y sube por los usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcione la evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.