前端文件上传原生

冷不防 2022-10-15 12:51 109阅读 0赞

input.οnchange=function()\{  
//查看文件变化 有哪些参数  
// for(var key in this)\{  
// console.log(key,this\[key\]);  
// \}  
console.log(’=============’,this.files);  
let file = this.files\[0\]  
let reader = new FileReader();  
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内  
// reader.readAsText(file)  
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。  
// reader.readAsDataURL(file)  
// 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.  
reader.readAsArrayBuffer(file);  
/\* 事件处理  
reader.onabort  
处理abort (en-US)事件。该事件在读取操作被中断时触发。  
reader.onerror (en-US)  
处理error (en-US)事件。该事件在读取操作发生错误时触发。  
reader.onload  
处理load (en-US)事件。该事件在读取操作完成时触发。  
reader.onloadstart  
处理loadstart (en-US)事件。该事件在读取操作开始时触发。  
reader.onloadend  
处理loadend (en-US)事件。该事件在读取操作结束时（要么成功，要么失败）触发。  
reader.onprogress  
处理progress (en-US)事件。该事件在读取Blob时触发。\*/

reader.onload = function(data){
                //reader.result 文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
             /* 
                属性
            reader.error 只读
            一个DOMException，表示在读取文件时发生的错误 。
            reader.readyState 只读
            表示FileReader状态的数字。取值如下：
            常量名	值	描述
            EMPTY	0	还没有加载任何数据.
            LOADING	1	数据正在被加载.
            DONE	2	已完成全部的读取请求.
            reader.result 只读
            文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
            */
    
                console.log(reader.result)
            }
            
            // console.log('file',reader);
        }