如何使用 js 读文件

js 读本地文件，必须要依靠 input，如果只有一个文件路径（比如 c:\abc.txt），是无法用 js 读的，这是客户端的安全限制（不能随意读取本地文件）。

所以，js 读文件，首先要有一个 input ：

<input type="file" id="uploadInp" multiple >

js 代码：

<script>
    var uploadInp = document.querySelector('#uploadInp');
    
    uploadInp.onchange = function () {
        // this.files 是一个 FileList 文件集合
        // 每一项是选择的文件 File
        let file = this.files[0];
        if (!file) return;	// 没选中文件

		// File 中三个重要的属性
        //   name：文件名
        //   size：文件大小
        //   type：文件类型
		
		// 一些常见文件类型的 type 值：
		/*
		pdf: application/pdf
		txt: text/plain
		jpg: image/jpeg
		png: image/png
		xls: application/vnd.ms-excel
		xlsx: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
		doc: application/msword
		docx: application/vnd.openxmlformats-officedocument.wordprocessingml.document
		*/
        
        /* 
        // 判断文件大小
        if (file.size > 1024) {
            alert('上传的文件必须在1KB以内');
            return;
        } */

        /* 
        // 判断文件类型
        if (!/(jpg|jpeg|gif|png)/i.test(file.type)) {
            alert('必须上传PNG/JPG/GIF格式的图片')
            return;
        } */

        // FileReader 文件读取类（异步读取）
        let reader = new FileReader;
        reader.onload = function (ev) {
            // ev.target.result 是读取出来的内容
            // 是 BASE64 格式
            // 格式依赖于函数 readAsDataURL
            abbreImg.src = ev.target.result;
        };
        
        reader.readAsDataURL(file);
        // 还有一些其它读数据的方法
        /*
            + FileReader.readAsDataURL
            + FileReader.readAsArrayBuffer
            + FileReader.readAsText
        */
    };
</script>

参考文档：

• [input file]https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file
• [FileReader]https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader