文章目录

# 读取文件

文件读取要利用到的API是FileReader，在HTML中的元素为：

<div>
    <input type="file" id="files" style="display:none" οnchange="import();"/>
    <input type="button" id="import" value="导入"/>
</div>

HTML中元素就这么简单，首先需要一个file类型的input元素，这里为啥要display:none呢？因为这个东西太丑了，，

JS代码：

$("#import").click(function(){//点击导入按钮，使files触发点击事件，然后完成读取文件的操作。
        $("#files").click();
    });

function import(){
    var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
    var name = selectedFile.name;//读取选中文件的文件名
    var size = selectedFile.size;//读取选中文件的大小
    console.log("文件名:"+name+"大小："+size);

    var reader = new FileReader();//这里是核心！！！读取操作就是由它完成的。
    reader.readAsText(selectedFile);//读取文件的内容

    reader.onload = function(){
        console.log(this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
    };
}

这样，读取本地文件的操作就完成了。有些网友说什么使用ActiveXObject的什么的，这个只有在IE中才能使用，但是现在连微软都放弃了IE，所以，不要这样使用。

# 拖入文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="author" content="oscar999">
  <title></title>
  </head>
  <body>
    <div id="dropbox"> Drop Here </div>
    <div id="filecontent"></div>
    <script> var dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); // true 捕捉, false 冒泡 dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; if(files.length) { var file = files[0]; var reader = new FileReader(); reader.onload = function() { document.getElementById("filecontent").innerHTML = this.result; }; reader.readAsText(file); } } </script>
  </body>
</html>

# 写出文件

<button type="button" id="down">Download</button>

document.getElementById('down').onclick = function () {
    var filename = "justdown.txt";
    var content = "Hello, you download a text file by Javasctipt.";
    download(filename, content);
};



function download(filename, content) {
    var blob = new Blob([content], {type: 'text/plain'});
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');

    a.style = "display: none";
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();

    setTimeout(function () {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 5);
}

that is it!! enjoy