比如现在有一需求，选择图片并实时显示（类似在网页上更换头像，可以实时预览图片）：
<body> <!--需求：即时预览： 即时：当用户选择完图片之后就立刻进行预览的处理 >>onchange 预览：通过文件读取对象的readAsDataURL()完成--> <form action=""> 文件： <input type="file" onchange="getFileContent();"> <br> <div></div> <input type="submit"> </form> <img src="" alt=""> <script> var div=document.querySelector("div"); function getFileContent(){ /*1.创建文件读取对象*/ var reader=new FileReader(); /*2.读取文件，获取DataURL * 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中 * 2.2.需要传递一个参数（binary large object）:文件(图片或者其它可以嵌入到文档的类型) * 2.3:文件存储在file表单元素的files属性中，它是一个数组，当有 multiple 属性的时候这个数组的值会有多个。*/ var file=document.querySelector("#myFile").files[0]; reader.readAsDataURL(file); /*获取数据*/ /*FileReader提供一个完整的事件模型，用来捕获读取文件时的状态 * onabort:读取文件中断片时触发 * onerror:读取错误时触发 * onload:文件读取完成且成功时触发 * onloadend:文件读取完成时触发，无论成功还是失败 * onloadstart:开始读取时触发 * onprogress:读取文件过程中持续触发*/ reader.onload=function(){ //console.log(reader.result); /*展示*/ document.querySelector("img").src=reader.result; } // 模拟进度条显示 reader.onprogress=function(e){ var percent= (e.loaded/ e.total)*100+"%"; div.style.width=percent; } } </script> </body>onchange：就是当文件内容发生变化时触发的事件。
五、地理定位接口方法：
// 参数1：获取地理信息成功之后的回调函数 // 参数2：获取地理信息失败之后的回调函数 // 参数3：调整获取当前地理信息的方式 // enableHighAccuracy:true/false:是否使用高精度 // timeout:设置超时时间，单位ms // maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms navigator.geolocation.getCurrentPosition(success,error,option);示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .de { width: 300px; height: 300px; border: 1px solid #ddd; } </style> </head> <body> <div></div> <script> var x = document.getElementById("demo"); function getLocation() { /*能力测试*/ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError, { /*enableHighAccuracy:true, timeout:3000*/ }); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } /*成功获取定位之后的回调*/ function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } /*获取定位失败之后的回调*/ function showError(error) { switch (error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } } getLocation(); </script> </body> </html>获取地理位置成功，将会把获取到的地理信息以参数的形式传递给回调函数：
position.coords.latitude 纬度
position.coords.longitude 经度
position.coords.accuracy 精度
position.coords.altitude 海拔高度
注意：由于地理位置属于用户的隐私信息，一般浏览器不允许获取，只有在浏览器中开启之后才能够获取。然而，在中国使用PC端的浏览器是不允许获取到用户的信息的，手机端可以。
那么怎么在PC端的浏览器获取到用户的位置信息呢？
调用百度地图，高德地图等第三方提供的API接口获取用户信息。