标签：com 技术分享 loading nload 分享 load UNC scale get
FileReader对象允许web应用程序异步读取存储在计算机上的文件的内容，使用File或Bolb对象指定要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象，也可以是来自拖放操作生成的DataTransfer对象，还可以是来自在一个HTMLCanvasElement上执行的mozGetAsFile()方法后返回结果。
在读取文件时发生错误
| 常量名 | 值 | 描述 |
| EMPTY | 0 | 还没有加载任何数据 |
| LOADING | 1 | 数据正在被加载 |
| DONE | 2 | 已完成全部的读取请求 |
该属性仅在读取操作完成后才有效，数据格式取决于使用哪种方式来进行读取操作。返回文件内容。
处理abort事件，该事件在读取操作被中断时触发。
处理error事件，该事件在读取发生错误时触发。
处理load事件，该事件在读取操作完成时触发。
处理loadstart事件，该事件在读取操作开始时触发。
处理loadend事件，该事件在读取操作结束时触发（要么成功，要么失败）。
处理progress事件，在读取Bolb时触发。
中止读取操作，在返回时，readyState的属性为DONE
开始读取指定的Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer数据对象.
开始读取指定的Blob中的内容, 一旦完成, result 属性中将包含所读取文件的原始二进制数据。
开始读取指定的Blob中的内容, 一旦完成, result 属性中将包含一个data：URL格式的字符串以表示所读取的文件内容。
开始读取指定的Blob中的内容, 一旦完成, result 属性中将包含一个字符串以表示所读取的文件内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="text" name="name" value="1234"> <input type="text" name="pwd" value="5678"> <input type="file" name="file" id="file" onchange="change()"> <input type="button" value="提交" onclick="submit()"> <img width="300" id="img" alt=""> <script> var fileInp = document.getElementById(‘file‘); var reader = new FileReader(); var img = document.getElementById(‘img‘); function change(){ var file = fileInp.files[0]; if(file.size > 0){ reader.readAsDataURL(file); } } reader.onload = function(){ img.src = reader.result; } function submit(){ var http = new XMLHttpRequest(); http.open(‘POST‘, ‘/file‘, true); http.onload = function(res) { console.log(res) }; http.send() } </script> </body> </html>
标签：com 技术分享 loading nload 分享 load UNC scale get
原文地址：https://www.cnblogs.com/peiyanh/p/9565406.html
