Exemplo de código de leitura de arquivos locais usando JavaScript

Como usar o navegador para visualizar arquivos locais?

O tema de hoje é usar o navegador para visualizar arquivos locais.

Devido às restrições das políticas de segurança do navegador, os programas JavaScript não podem acessar recursos locais livremente, isso é um critério que deve ser seguido para a segurança das informações do usuário. Se os programas JavaScript na Internet pudessem acessar recursos locais do host do usuário livremente, os usuários do navegador não teriam segurança alguma. Apesar dessa restrição de segurança, no entanto, com permissão do usuário, o navegador ainda pode acessar recursos locais.

O método de obter permissão do usuário é através de rótulos para permitir que o usuário selecione manualmente o arquivo, este processo é o processo de concessão de permissão de acesso do usuário. Em seguida, usando o objeto File obtido através de URL.createObjectURL(file), converta para URL do arquivo e pode ser passado para tags como img, video, audio e outros. Eu encapsulei a função de converter arquivos locais em URL em uma classe.

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("mudança");
  //Se _this.urls não estiver vazio, libera a url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url);//Após liberado, não será possível usar mais os recursos dessa 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);
 )
}
/*
Descrição dos parâmetros: getted: function(urls){}
urls é um array de objetos URL. [url]
url = {
url:url, //URL do arquivo selecionado
file:file //Referência do objeto de arquivo selecionado
}
*/
LocalFileUrl.prototype.getUrl = function(getted){
 this.getted = getted;
 $("#"+ this.input_id).click();
}

Método de uso:

var localFileUrl = new LocalFileUrl();//Instanciar o objeto
//Dispara a leitura, abre a caixa de seleção de arquivos e escuta o evento de seleção de arquivos.  
localFileUrl.getUrl(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+índice+"----"+item.url+"</div>")
 )
)

Reescrever usando o objeto promise do jQuery

A vantagem desse método é que pode usar a escrita em cascata e pode ligar múltiplos eventos de tratamento done, executando na ordem de ligação.

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){
  //Se _this.urls não estiver vazio, libera a url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url);//Após liberado, não será possível usar mais os recursos dessa url
   });
   _this.urls = [];
  }
  $(this.files).each(function(index, file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url: url, file: file});
  });
  //Passa um array de parâmetros opcionais
  _this.dtd.resolveWith(window, new Array(_this.urls));
 )
}
/*
Retorna um objeto promise do jQuery, que pode ligar o evento done(). done(urls) recebe um array de urls
{}}
 url:url,
 file:file// Objeto de arquivo selecionado
}
*/
LocalFileUrl.prototype.getUrl = function(){
 this.dtd = $.Deferred();
 $("#"+ this.input_id).click();
 return this.dtd.promise();
}

Modo de uso

var localFilrUrl = new LocalFileUrl();
// Associar evento done
localFileUrl.getUrl().done(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+índice+"----"+item.url+"</div>")
 )
}).done(function(){
 console.log("Concluído");
}).done(function(){
 alert("Já lido o caminho do arquivo local");
)

Compatibilidade

URL.createObjectURL(File/(Blob) é uma funcionalidade experimental.IE10e versões superiores são compatíveisA correspondência é URL.revokeObjectURL(url), que avisa o navegador de que não há mais necessidade da referência a essa URL, podendo ser liberada. Após a chamada, essa URL imediatamente se torna inativa.

Declaração: O conteúdo deste artigo é de origem na Internet, pertencendo ao respectivo detentor dos direitos autorais, o conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado artificialmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)