Exemples pour expliquer comment js lit les fichiers locaux

Cet article partagera avec vous un exemple de lecture de fichiers locaux par js. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Comment prévisualiser les fichiers locaux dans le navigateur ?

Le sujet d'aujourd'hui concerne l'utilisation du navigateur pour prévisualiser les fichiers locaux.

En raison des restrictions de la politique de sécurité du navigateur, les programmes JavaScript ne peuvent pas accéder librement aux ressources locales. Il s'agit d'une directive qui doit être suivie pour la sécurité des informations des utilisateurs. Si les programmes JavaScript sur le réseau peuvent accéder librement aux ressources locales de l'hôte de l'utilisateur, les utilisateurs du navigateur n'auront aucune sécurité. Malgré cette restriction de sécurité, le navigateur peut toujours accéder aux ressources locales avec l'autorisation de l'utilisateur.

La façon d'obtenir l'autorisation de l'utilisateur est de laisser l'utilisateur sélectionner manuellement le fichier via l'étiquette. Ce processus est le processus par lequel l'utilisateur accorde des autorisations d'accès. Utilisez ensuite l'objet File obtenu pour le convertir en une URL de fichier via URL.createObjectURL(file), qui peut être transmise à des balises telles que img, vidéo, audio, etc. pour utilisation. J'ai encapsulé la fonction de conversion de fichiers locaux en URL dans une classe.

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

Utilisation :

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

Utilisez l'objet de promesse de jQuery pour réécrire

L'avantage de cette méthode est qu'elle peut utiliser l'écriture en chaîne et lier plusieurs A done fonction de gestion des événements, l'ordre d'exécution est conforme à l'ordre de liaison.

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

Utilisation

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

Compatibilité

URL.createObjectURL(File/Blob) est une fonctionnalité expérimentale. Compatible avec IE10 et supérieur. Correspond à ceci est URL.revokeObjectURL(url), qui est utilisé pour indiquer au navigateur que la référence à cette URL n'est plus nécessaire et peut être publiée. Une fois appelée, cette URL devient immédiatement invalide.

Recommandations associées :

Fonctions communes php pour la lecture des fichiers locaux

exemple de code HTML5 pour la lecture des fichiers locaux_html5 conseils du didacticiel

Fonctions communes php pour lire les fichiers locaux (fopen et file_get_contents)_Tutoriel PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!