《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 方法時，如果瀏覽器位置發(fā)生改變才沧，那么會返回變更后的位置信息迈喉，調用 clearWatch 可以停止監(jiān)聽。
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 的拖放文件操作帆啃，還可以實現(xiàn)在拖放時獲取到文件內容：
<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 來提交文件內容到服務器。
