js读取本地文件
js读取本地文件介绍
- 在h5以前,js是没有办法读取文件的
- 实现步骤:
- 获取file, 可以从中获取
var file = document.querySelector('.file').files[0];
- 创建一个fileReader的对象:
var fileReader = new FileReader();
- 读取文件
reader.readAsDataURL(file);
; - 使用读取的结果
fileReader.onload = function() {var fileContent = reader.result;}
, 文字,图片可以直接使用
从外部拖入文件
- 游览器默认情况下, 是直接打开文件的, 所以我们要修改浏览器的默认拖入事件
document.ondrop = function(event){
event.preventDefault();
}
document.ondragover = function(event){
event.preventDefault();
}
cotainer.ondrop = function (event) {
var file = event.dataTransfer.files[0];
console.log(files);
var fileReader = new FileReader();
fileReader.readAsDateURL(file);
fileReader.onload = function () {
var fileResult = fileReader.result();
}
event.preventDefault();
}
cotainer.ondragover = function (event) {
console.log();
event.preventDefault();
}
cotainer.ondragenter = function (event) {
this.style.backgroundColor = 'gray';
}
cotainer.ondragleave = function (event) {
this.style.backgroundColor = 'transparent';
}