Examples to explain how js reads local files

This article will share with you an example of js reading local files. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

How to preview local files in the browser?

Today’s topic is using the browser to preview local files.

Due to the restrictions of browser security policies, JavaScript programs cannot freely access local resources. This is a guideline that must be followed for user information security. If JavaScript programs on the network can freely access the local resources of the user's host, then browser users will have no security at all. Despite this security restriction, the browser can still access local resources with the user's permission.

The way to obtain the user's permission is to let the user manually select the file through the label. This process is the process of the user granting access permissions. Then use the obtained File object to convert it into a file URL through URL.createObjectURL(file), which can be passed to tags such as img, video, audio, etc. for use. I encapsulated the function of converting local files into URLs into a class.

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

Usage method:

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

Use jQuery's promise object to rewrite

The advantage of this method is that it can use chain writing and can bind multiple done event handlers Functions are executed in order of binding.

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

Usage

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

Compatibility

URL.createObjectURL(File/Blob) is an experimental feature. Compatible with IE10 and above. Corresponding to this is URL.revokeObjectURL(url), which is used to tell the browser that the reference to this url is no longer needed and can be released. Once called, this url becomes invalid immediately.

Related recommendations:

Common functions for reading local files in php

html5 sample code for reading local files_html5 tutorial tips

php Commonly used functions for reading local files (fopen and file_get_contents)_PHP tutorial

The above is the detailed content of Examples to explain how js reads local files. For more information, please follow other related articles on the PHP Chinese website!