Esempio di codice per la lettura di file locali in JavaScript

Come utilizzare l'anteprima dei file locali nel browser?

L'argomento di oggi è l'anteprima dei file locali con il browser.

A causa delle limitazioni delle politiche di sicurezza del browser, i programmi JavaScript non possono accedere liberamente alle risorse locali, questo è un principio che deve essere rispettato per la sicurezza delle informazioni dell'utente. Se i programmi JavaScript su Internet potessero accedere liberamente alle risorse locali degli utenti, gli utenti del browser non avrebbero alcuna sicurezza. Nonostante questa limitazione di sicurezza, il browser può ancora accedere alle risorse locali se ottenuto il permesso dell'utente.

Il metodo per ottenere il permesso dell'utente è tramite l'etichetta per far scegliere manualmente il file all'utente, questo processo è il processo di concessione di permessi di accesso dell'utente. Poi, utilizzando l'oggetto File ottenuto tramite URL.createObjectURL(file), è possibile convertire l'URL del file e passarlo a etichette come img, video, audio, ecc. Ho encapsulato la funzione di conversione del file locale in URL in una 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("change");
  //se _this.urls non è vuoto, rilasciare l'url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url); // una volta rilasciato, l'url non sarà più utilizzabile per le risorse
   });
   _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);
 )
}
/*
Descrizione dei parametri: getted:function(urls){}
urls è un array di oggetti url. [url]
url = {
url:url, //选取的文件url
file:file //选取的文件对象引用
}
*/
LocalFileUrl.prototype.getUrl = function(getted){
 this.getted = getted;
 $("#"+ this.input_id).click();
}

Metodo di utilizzo:

var localFileUrl = new LocalFileUrl(); // istanziare l'oggetto
//trasmettere la lettura, aprire la finestra di selezione dei file e ascoltare l'evento di selezione dei file.  
localFileUrl.getUrl(function(urls){
 urls.forEach(function(item,index,array) {
  $("body").append("<div>"+index+"----"+item.url+"</div>")
 )
)

Riscrittura utilizzando l'oggetto promise di jQuery

Il vantaggio di questo metodo è che può utilizzare la scrittura a catena e può bindare più funzioni di gestione degli eventi done, nell'ordine di bindaggio.

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 non è vuoto, rilasciare l'url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url); // una volta rilasciato, l'url non sarà più utilizzabile per le risorse
   });
   _this.urls = [];
  }
  $(this.files).each(function(index, file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url:url, file:file});
  });
  //inviare un array di parametri opzionali
  _this.dtd.resolveWith(window, new Array(_this.urls));
 )
}
/*
ritorna un oggetto promise di jQuery, che può bindare l'evento done(). done(urls) accetta un array di urls
{
 url:url:
 file:file// selezionato l'oggetto del file
}
*/
LocalFileUrl.prototype.getUrl = function() {
 this.dtd = $.Deferred();
 $("#"+ this.input_id).click();
 return this.dtd.promise();
}

Modo d'uso

var localFilrUrl = new LocalFileUrl();
// Leggi l'evento done
localFileUrl.getUrl().done(function(urls) {
 urls.forEach(function(item,index,array) {
  $("body").append("<div>"+index+"----"+item.url+"</div>")
 )
}).done(function() {
 console.log("Completato");
}).done(function() {
 alert("Hai letto il percorso del file locale");
)

Compatibilità

URL.createObjectURL(File/Blob) è una funzione sperimentale.Compatibile con IE10 e versioni successive. Corrisponde a URL.revokeObjectURL(url), che viene utilizzato per informare il browser che non è più necessario il riferimento a questa URL, può essere liberato. Una volta chiamato, questa URL diventa immediatamente invalida.

Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato dagli utenti di Internet autonomamente, questo sito non detiene il diritto di proprietà, non è stato sottoposto a elaborazione manuale e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.