js读取本地文件

js读取本地文件

js读取本地文件介绍

• 在h5以前，js是没有办法读取文件的
• 实现步骤：
  
  1. 获取file， 可以从中获取 var file = document.querySelector('.file').files[0];
  2. 创建一个fileReader的对象： var fileReader = new FileReader();
  3. 读取文件 reader.readAsDataURL(file);;
  4. 使用读取的结果 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';
}