jsでローカルファイルを読み取る方法

以下にローカルファイルを読み取る 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 == &#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();
}

使い方:

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

以上、皆様のお役に立てれば幸いです。

関連記事:

Webフォーム用JSプラグイン(高品質おすすめ)

jQueryでオンライン接客機能を実装する方法

jQueryで画像表示プラグインを使う方法

以上がjsでローカルファイルを読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。