《JavaScript 高级程序设计（第三版）》阅读随笔
Geolocation API
getCurrentPosition
调用浏览器的 navigate.geolocation. getCurrentPosition 方法，可以获取到当前的地理位置信息：
<script>
var geo = navigator.geolocation.getCurrentPosition(function (data) {
console.log(data) // 获取成功
}, function (err) {
console.log(err) // 获取失败
}, {}) // 一些配置参数
</script>
在没有必要的情况，一般不设置特别高的地理位置精度，因为会慢而且更加消耗性能。
watchPosition
调用浏览器的 navigate.geolocation. watchPosition 方法时，如果浏览器位置发生改变，那么会返回变更后的位置信息，调用 clearWatch 可以停止监听。
File API
使用 HTML 的 input 标签，可以获取到操作文件的能力：
<input type="file" />
FileReader
FileReader 是一种异步文件读取类型。可以用来取来 File 中获取到的文件：
<script>
var in1 = document.getElementById('input1')
in1.onchange = function (event) {
console.log('onchange', event)
var files = event.target.files
console.log('files', event.target.files)
var file1 = new FileReader()
file1.readAsText(files[0])
file1.onload = function (data) {
console.log('onload', data)
}
file1.onprogress = function (data) {
console.log('onprogress', data)
}
file1.onerror = function (err) {
console.log('onerror', err)
}
file1.onloadend = function (data) {
console.log('onloadend', data)
}
}
</script>
调用部分读取
调用文件的 slice 方法，可以读取部分文件内容，并返回一个 Blog 类型，Blog 类型是 FileReader 类型的父类型：
<input type="file" id='input2'>
<script>
var input2 = document.getElementById('input2')
input2.onchange = function (event) {
console.log('onchange', event)
var files = event.target.files
console.log('files', event.target.files)
var file2 = new FileReader()
file2.readAsText(files[0].slice(1,3))
file2.onload = function (data) {
console.log('onload', data)
}
file2.onprogress = function (data) {
console.log('onprogress', data)
}
file2.onerror = function (err) {
console.log('onerror', err)
}
file2.onloadend = function (data) {
console.log('onloadend', data)
}
}
</script>
URL 对象
在获取到文件内容以后，还可以将其保存在一块内存空间内，然后返回该内存空间的引用，即 URL 地址：
<input type="file" id='input3'>
<img id='img3' alt="">
<script>
var input3 = document.getElementById('input3')
input3.onchange = function (event) {
console.log('onchange', event)
var files = event.target.files
console.log('files', event.target.files)
var file3 = new FileReader()
file3.readAsDataURL(files[0])
file3.onload = function (data) {
console.log('onload', data)
}
file3.onprogress = function (data) {
console.log('onprogress', data)
}
file3.onerror = function (err) {
console.log('onerror', err)
}
file3.onloadend = function (data) {
console.log('onloadend', data)
var img3 = document.getElementById('img3')
img3.src = data.target.result
}
}
</script>
拖放文件
结合 HTML 的拖放文件操作，还可以实现在拖放时获取到文件内容：
<div id="draggable1" style="position: absolute; width: 200px;height: 100px;background-color: rgb(79, 168, 247);">
</div>
<script>
var draggable1 = document.getElementById('draggable1')
draggable1.addEventListener('dragenter', function (e) {
e.stopPropagation();
e.preventDefault()
}, false)
draggable1.addEventListener('dragover', function (e) {
e.stopPropagation();
e.preventDefault()
}, false)
draggable1.addEventListener('drop', function (e) {
e.stopPropagation();
e.preventDefault()
fileHandler(e.dataTransfer.files)
}, false)
function fileHandler(files) {
var file4 = new FileReader()
file4.readAsDataURL(files[0])
file4.onload = function (data) {
console.log('onload', data)
}
file4.onprogress = function (data) {
console.log('onprogress', data)
}
file4.onerror = function (err) {
console.log('onerror', err)
}
file4.onloadend = function (data) {
console.log('onloadend', data)
}
}
</script>
XHR
在获取到文件以后，还可以直接调用 XMLHttpRequest 来提交文件内容到服务器。
