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='file' style='display:none' id='"+this.input_id+"' 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("<div>"+index+"----"+item.url+"</div>")
 }
}

jQueryのpromiseオブジェクトを使用して書き換えます。

この方法の利点は、リンク式の書き方を使用でき、複数のdoneイベントハンドラをバインドでき、実行順序はバインド順序に従います。

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){
  //_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("<div>"+index+"----"+item.url+"</div>")
 }
}).done(function(){
 console.log("完了");
}).done(function(){
 alert("ローカルファイルパスを読み取りました");
}

互換性

URL.createObjectURL(File/Blobは実験的な機能です。IE10およびそれ以降のバージョンで互換性がありますそれに対応するのはURL.revokeObjectURL(url)であり、ブラウザにこのurlの参照が必要ないことを伝えるために使用されます。呼び出された後、このurlは即座に無効になります。

声明：このコンテンツはインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードしたものであり、このサイトは所有権を有しないものであり、人工編集も行われていません。著作権侵害の疑いがある場合は、以下のメールアドレスにご連絡ください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください。侵害を報告する場合は、関連する証拠を提供し、確認された場合、このサイトは即座に侵害される内容を削除します。)