How to read local files in js-JS Tutorial-php.cn

How to read local files in js

亚连

Release： 2018-06-19 10:19:09

Original

4582 people have browsed it

Below I 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.

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

Copy after login

Usage method:

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

Copy after login

Use jQuery’s promise object to rewrite

This way The advantage is that you can use chain writing, and you can bind multiple done event processing functions, and the order of execution is according to the binding order.

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

Copy after login

How to use

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

JS plug-in for Web forms (high-quality recommendation)

How to implement online customer service function in jQuery

How to use the image viewing plug-in in jQuery

The above is the detailed content of How to read local files in js. For more information, please follow other related articles on the PHP Chinese website!