文件上传需要设置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的形式读取文件
})