jsでローカルファイルを読み取る方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-19 10:19:09

オリジナル

4599 人が閲覧しました

以下にローカルファイルを読み取る js の例を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

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

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

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

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

function LocalFileUrl(){
 var _this = this;
 this.input_id = &#39;input_getLocalFile&#39;+ 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 = &#39;input_getLocalFile&#39;+ 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 サイトの他の関連記事を参照してください。