使用file API上传图片或txt格式文件

文件上传需要设置input的type属性为file

如果想选择多个文件可以在<input/>中加入multiple

<input type="file" id="fileInput" multiple>

效果如下图

使用onchange事件监听数据，this.files可以得到文件信息的数组

fileInput.onchange = function(){
　　console.log(this.files);
}

使用this.files[0]即可获得第一个文件

文件主要属性如上图，name为文件名，size为文件大小，type为文件类型，lastModifiedDate表示上一次修改的时间戳，webkitRelativePath表示的是目录，如果在input中设置webkitdirectory,则该属性显示选择的目录


fileReader对象是用来读取文件，使用相应方法后，用onload事件监听读取成功，使用e.target.result获取得到的数据

上传txt格式文件用到readAsText方法

 

fileInput.onchange = function(){
　　var file = this.files[0];
　　var reader = new FileReader();
　　reader.onload = function(e){
　　　　console.log(e.target.result) ; 
　　}
　　reader.readAsText(file);
}

 得到结果如下

上传图片文件用到readAsDataURL方法

fileinInput.addEventListener('change',function(){
   if(!fileinInput.value){
       alert("请选择文件")
       return ;
   }
   var file = fileinInput.files[0];
   if(file.type!=='image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif'){
       alert('不是正确的图片格式');
       return ;
   }
   var reader = new FileReader();
　 //读取文件成功后执行onload事件
   reader.onload = function(e){
       var data = e.target.result ;//拿到了图片的base-64编码
       box.style.backgroundImage = 'url('+data+')'//将图片插入到页面之中
       console.log(e.target.result)//很长的一串base-64编码
   }
  reader.readAsDataURL(file);//以DataURL的形式读取文件
})