ホームページ > 記事 > ウェブフロントエンド > js がローカルファイルを読み取る方法を説明する例

js がローカルファイルを読み取る方法を説明する例

小云云オリジナル: 2017-12-23 14:30:182600ブラウズ

この記事では、js によるローカルファイルの読み取りの例を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ブラウザでローカルファイルをプレビューするにはどうすればよいですか?

今日のトピックは、ブラウザを使用したローカルファイルのプレビューです。

ブラウザのセキュリティポリシーの制限により、JavaScript プログラムはローカルリソースに自由にアクセスできません。これは、ユーザーの情報セキュリティのために従う必要があるガイドラインです。ネットワーク上の JavaScript プログラムがユーザーのホストのローカルリソースに自由にアクセスできる場合、ブラウザユーザーにはまったくセキュリティがありません。このセキュリティ制限にもかかわらず、ブラウザはユーザーの許可があればローカルリソースにアクセスできます。

ユーザー許可を取得する方法は、ユーザーがタグを通じてファイルを手動で選択できるようにすることです。このプロセスは、ユーザーがアクセス許可を付与するプロセスです。次に、取得した File オブジェクトを使用して URL.createObjectURL(file) によってファイル URL に変換し、img、video、audio などのタグに渡して使用できます。ローカルファイルをURLに変換する機能をクラスにカプセル化しました。

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

使い方:

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

jQueryのPromiseオブジェクトを使って書き換えます

このメソッドの利点は、チェーンライティングが使用でき、複数のdoneイベント処理関数をバインドできること、実行順序がバインドの順序になることです。。

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

使用法

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

互換性

URL.createObjectURL(File/Blob) は実験的な機能です。 IE10以降に対応しています。これに対応するのは URL.revokeObjectURL(url) で、この URL への参照が不要になり解放できることをブラウザーに伝えるために使用されます。一度呼び出されると、この URL はすぐに無効になります。

js がローカル ファイルを読み取る方法を説明する例

関連記事

js がローカルファイルを読み取る方法を説明する例