Comment lire des fichiers locaux en js

Ci-dessous, je vais partager avec vous un exemple de js lisant des fichiers locaux. Il a une bonne valeur de référence et j'espère qu'il sera utile à 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 des balises. 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 == &#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();
}

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 que vous pouvez utiliser l'écriture en chaîne, que vous pouvez lier plusieurs fonctions de traitement d'événements terminées et que 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();
}

Comment l'utiliser

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Plug-in JS pour formulaires Web (recommandation de haute qualité)

Comment implémenter la fonction de service client en ligne dans jQuery

Comment utiliser le plug-in de visualisation d'images dans jQuery

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!