文件读取 

<!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>
     <form action="">
     文件:<input name="myFile" id="myFile" type="file" onchange="getFileContent(); multiple" ><br>
     <input type="submit">
     </form>
     <img src="" alt="">
     <script>
     function getFileContent(){
         var reader=new FileReader();
         var file=document.querySelector("#myFile").files;
         reader.readAsDataURL(file[0]);
        //  console.log(reader.result);//读取结束后会把读取的结果存放在result中
        //  console.log(123);
        reader.onloadend=function(){
        document.querySelector("img").src=reader.result;    
        }

     }
     </script>
</body>
</html>

<!-- 
    1.FileReader() :读取文件内容
      0.onbort:读取文件短片时触发
      1.onerror:读取错误时触发
      2.onload:文件读取完成时触发
      3.onloadend:读取完成触发无论失败还是成功
      4.onloadstart:开始读取时触发
      5.onprogress:读取过程中持续触发
    2.readAsText():读取文本内容
    3.readAsDataURL():读取文件获取一段data开头的字符串,这段字符串本质就是dataURL.dataURL是一种将文件嵌入到文档的方案;
    4.readAsBinaryString():读取任意类型的文件,返回二进制字符串
    5.abort();中断截取
    6.onChange="";返回实时的信息
 -->

 

posted @ 2020-03-08 13:03  尚宇园  阅读(104)  评论(0)    收藏  举报