So lesen Sie lokale Dateien in js

Im Folgenden werde ich ein Beispiel für das Lesen lokaler Dateien mit js teilen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

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 das Etikett 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 == &#39;function&#39; && _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 Versprechensobjekt von jQuery, um

auf diese Weise neu zu schreiben. Der Vorteil besteht darin, dass Sie Kettenschreiben verwenden und mehrere ausgeführte Ereignisverarbeitungsfunktionen binden können und die Ausführungsreihenfolge der Bindungsreihenfolge entspricht.

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();
}

Wie man es benutzt

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("已经读取了本地文件路径");
})

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

JS-Plug-in für Webformulare (hochwertige Empfehlung)

So implementieren Sie die Online-Kundendienstfunktion in jQuery

So verwenden Sie das Bildanzeige-Plug-in in jQuery

Das obige ist der detaillierte Inhalt vonSo lesen Sie lokale Dateien in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!