js 按钮 上传读取文件内容与写入保存文件

此文针对md、txt、js、html等文件，不针对doc,pdf,xlsx,图片等文件

上传选择文件

let input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", ".md");
input.onchange = function () {
	let file = this.files[0];
	//file.name 文件名称
	console.log(file, file.name);
	getFileContent(this, function (str) {
		console.log(str)//文件内容
	});
};
input.click();// 模拟手动点击

读取文件内容

var getFileContent = function (fileInput,callback) {
	if (fileInput.files && fileInput.files.length > 0 && fileInput.files[0].size > 0) {
	     //下面这一句相当于JQuery的：var file =$("#upload").prop('files')[0];
	     var file = fileInput.files[0];
	     if (window.FileReader) {
	         var reader = new FileReader();
	         reader.onloadend = function (evt) {
	             // console.log(evt.target.readyState)
	             // ==2 或者 FileReader.DONE
	             if (evt.target.readyState == 2) {
	             	//文件内容
	                 callback(evt.target.result);
	             }
	         };
	         /*
	         readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
	         这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回undefined
	         也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果
	         */
	         // readAsText 第二个参数为指定编码格式
	         reader.readAsText(file);
	     }
	 }
	};

拓展 关于 readyState

var reader = new FileReader();
console.log('EMPTY', reader.readyState); // readyState will be 0

reader.readAsText(blob);
console.log('LOADING', reader.readyState); // readyState will be 1

reader.onloadend = function () {
  console.log('DONE', reader.readyState); // readyState will be 2
};

值	状态	描述
0	empty	尚未调用任何读取方法
1	LOADING	已调用读取方法
2	DONE	操作完成

保存文件

function download(name, data) {
    var urlObject = window.URL || window.webkitURL || window;
    var downloadData = new Blob([data]);
    var save_link = document.createElement("a")
    save_link.href = urlObject.createObjectURL(downloadData);
    save_link.download = name;
    save_link.click()
}
download('文件名.md',"这是内容内容内容")