Exemple de code pour la lecture de fichiers locaux en JavaScript

Comment utiliser la prévisualisation des fichiers locaux côté navigateur ?

Le thème d'aujourd'hui est l'utilisation de la prévisualisation des fichiers locaux dans le navigateur.

En raison des restrictions des politiques de sécurité du navigateur, le programme JavaScript ne peut pas accéder librement aux ressources locales, ce qui est une règle inévitable à suivre pour la sécurité des informations de l'utilisateur. Si les programmes JavaScript en ligne pouvaient librement accéder aux ressources locales de l'hôte principal de l'utilisateur, les utilisateurs du navigateur ne pourraient pas prétendre à la sécurité. Malgré cette restriction de sécurité, le navigateur peut accéder aux ressources locales sous réserve de l'autorisation de l'utilisateur.

L'obtention de l'autorisation de l'utilisateur est réalisée par l'intermédiaire de l'étiquette pour permettre à l'utilisateur de sélectionner manuellement le fichier, ce processus est l'octroi d'accès par l'utilisateur. Ensuite, en utilisant l'objet File obtenu via URL.createObjectURL(file), il est possible de convertir l'URL du fichier et de le transmettre aux balises telles que img, video, audio, etc. J'ai encapsulé la fonction de conversion de fichier local en URL dans une 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");
  //Si _this.urls n'est pas vide, libère l'url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url);//Une fois libéré, il ne sera plus possible d'utiliser les ressources de cette 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);
 )
}
/*
Exemple de paramètres : getted:function(urls){}
urls est un tableau d'objets url.[url]
url = {
url:url, //Url du fichier sélectionné
file:file //Référence de l'objet de fichier sélectionné
}
*/
LocalFileUrl.prototype.getUrl = function(getted){
 this.getted = getted;
 $("#"+ this.input_id).click();
}

Méthode d'utilisation :

var localFileUrl = new LocalFileUrl();//Instanciez l'objet
//Déclenchez la lecture, affichez le boîte de dialogue de sélection de fichiers et écoutez l'événement de sélection de fichiers.  
localFileUrl.getUrl(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+index+"----"+item.url+"</div>")
 )
)

Rédigez en utilisant l'objet promise de jQuery

L'avantage de cette méthode est qu'elle permet d'utiliser la syntaxe en chaîne et de lier plusieurs fonctions de traitement des événements done, suivant l'ordre de liaison.

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){
  //Si _this.urls n'est pas vide, libère l'url
  if(_this.urls){
   _this.urls.forEach(function(url, index, array){
    URL.revokeObjectURL(url.url);//Une fois libéré, il ne sera plus possible d'utiliser les ressources de cette url
   });
   _this.urls = [];
  }
  $(this.files).each(function(index, file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url: url, file: file});
  });
  //Un tableau de paramètres optionnels est passé
  _this.dtd.resolveWith(window, new Array(_this.urls));
 )
}
/*
Renvoie un objet promise de jQuery, qui peut lier l'événement done(). done(urls) reçoit un tableau d'urls
{}}
 url:url,
 file:file// Objet de fichier sélectionné
}
*/
LocalFileUrl.prototype.getUrl = function(){
 this.dtd = $.Deferred();
 $("#"+ this.input_id).click();
 return this.dtd.promise();
}

Mode d'utilisation

var localFilrUrl = new LocalFileUrl();
// Lié à l'événement done
localFileUrl.getUrl().done(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+index+"----"+item.url+"</div>")
 )
}).done(function(){
 console.log("Terminé");
}).done(function(){
 alert("Le chemin d'accès local du fichier a été lu");
)

Compatibilité

URL.createObjectURL(File/(Blob) est une fonction expérimentale.IE10et versions supérieures compatiblesCorrespondant à URL.revokeObjectURL(url), qui permet d'informer le navigateur que l'url n'est plus nécessaire et peut être libérée. Une fois appelé, cette url devient immédiatement inactive.

Déclaration : Le contenu de cet article est extrait du réseau, propriété de l'auteur original, contribué et téléchargé par les utilisateurs d'Internet. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)