<!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="";返回实时的信息 -->