Beispiele zur Erläuterung, wie js lokale Dateien liest

Dieser Artikel zeigt Ihnen ein Beispiel für das Lesen lokaler Dateien durch js. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Wie kann ich eine Vorschau lokaler Dateien im Browser anzeigen?

Das heutige Thema ist die Verwendung des Browsers zur Vorschau lokaler Dateien.

Aufgrund der Einschränkungen der Browser-Sicherheitsrichtlinien können JavaScript-Programme nicht frei auf lokale Ressourcen zugreifen. Dies ist eine Richtlinie, die für die Sicherheit der Benutzerinformationen befolgt werden muss. Wenn JavaScript-Programme im Netzwerk frei auf die lokalen Ressourcen des Hosts des Benutzers zugreifen können, haben Browserbenutzer überhaupt keine Sicherheit. Trotz dieser Sicherheitseinschränkung kann der Browser mit Erlaubnis des Benutzers weiterhin auf lokale Ressourcen zugreifen.

Die Möglichkeit, die Berechtigung des Benutzers zu erhalten, besteht darin, den Benutzer die Datei manuell über Tags auswählen zu lassen. Bei diesem Vorgang erteilt der Benutzer Zugriffsberechtigungen. Verwenden Sie dann das erhaltene Dateiobjekt, um es über URL.createObjectURL(file) in eine Datei-URL umzuwandeln, die zur Verwendung an Tags wie img, Video, Audio usw. übergeben werden kann. Ich habe die Funktion zum Konvertieren lokaler Dateien in URLs in einer Klasse gekapselt.

function LocalFileUrl(){
 var _this = this;
 this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
 $("body").append("<input type=&#39;file&#39; style=&#39;display:none&#39; id=&#39;"+this.input_id+"&#39; multiple>");
 this.urls=[];
 var _this = this;
 $("#" + this.input_id).change(function(e){
  console.log("change");
  //如果_this.urls 不为空,则释放url
  if(_this.urls){
   _this.urls.forEach(function(url,index,array){
    URL.revokeObjectURL(url.url);//一经释放，马上将无法使用这个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);
 })
}
/*
参数说明：getted:function(urls){}
urls是一个url对象数组。[url]
url = {
url:url, //选取的文件url
file:file //选取的文件对象引用
}
*/
LocalFileUrl.prototype.getUrl = function(getted){
 this.getted = getted;
 $("#"+ this.input_id).click();
}

Verwendung:

var localFileUrl = new LocalFileUrl();//实例化对象
//触发读取，弹出文件选择框，并且监听文件选择事件。  
localFileUrl.getUrl(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<p>"+index+"----"+item.url+"</p>")
 })
})

Verwenden Sie das Promise-Objekt von jQuery zum Umschreiben

Der Vorteil dieser Methode besteht darin, dass sie Kettenschreiben verwenden und mehrere A done binden kann Bei der Ereignisbehandlungsfunktion richtet sich die Ausführungsreihenfolge nach der verbindlichen Reihenfolge.

function LocalFileUrl(){
 this.dtd ={};
 this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
 $("body").append("<input type=&#39;file&#39; style=&#39;display:none&#39; id=&#39;"+this.input_id+"&#39; multiple>");
 this.urls=[];
 var _this = this;
 $("#" + this.input_id).change(function(e){
  //如果_this.urls 不为空,则释放url
  if(_this.urls){
   _this.urls.forEach(function(url,index,array){
    URL.revokeObjectURL(url.url);//一经释放，马上将无法使用这个url的资源
   });
   _this.urls = [];
  }
  $(this.files).each(function(index,file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url:url,file:file});
  });
  //传入一个可选的参数数组
  _this.dtd.resolveWith(window,new Array(_this.urls));
 })
}
/*
返回一个jquery 的promise 对象，可以绑定done()事件。done(urls)接收一个urls数组
{
 url:url,
 file:file// 选取的文件对象
}
*/
LocalFileUrl.prototype.getUrl = function(){
 this.dtd = $.Deferred();
 $("#"+ this.input_id).click();
 return this.dtd.promise();
}

Verwendung

var localFilrUrl = new LocalFileUrl();
// 绑定done事件
localFileUrl.getUrl().done(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<p>"+index+"----"+item.url+"</p>")
 })
}).done(function(){
 console.log("完成");
}).done(function(){
 alert("已经读取了本地文件路径");
})

Kompatibilität

URL.createObjectURL(File/Blob) ist eine experimentelle Funktion. Kompatibel mit IE10 und höher. Dem entspricht URL.revokeObjectURL(url), mit der dem Browser mitgeteilt wird, dass der Verweis auf diese URL nicht mehr benötigt wird und freigegeben werden kann. Nach dem Aufruf wird diese URL sofort ungültig.

Verwandte Empfehlungen:

Gemeinsame PHP-Funktionen zum Lesen lokaler Dateien

HTML5-Beispielcode zum Lesen lokaler Dateien_HTML5-Tutorial-Tipps

Gemeinsame PHP-Funktionen zum Lesen lokaler Dateien (fopen und file_get_contents)_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung, wie js lokale Dateien liest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!