一、概述
二、闭包
存储数据：栈、堆
调用栈（执行空间）：执行代码
function fn() {
let num = 10
return function () {
console.log(num)
}
}
let res = fn()
// res存储的不再是fn函数内部返回的函数fn的执行空间就销毁了
res = 100
const utils = (function () {
function randomColor() { }
return {
randomColor
}
})()
三、FormData
FormData：获取二进制流文件
const formData = new FormData() // formData对象专门识别表单中的所有数据
// 使用formData一次性获取form里面所有带有name属性的内容，参数是一个form标签元素
const form = document.querySelector('form')
const formData = new FormData(form)
const file = input.files[0]
// formData.append(key, value)
formData.append('avatar', file)
formData.append('username', 'osoLife')
<body>
<form>
<input type="file" name="avatar" id="avatar" style="display: none;">
<label for="avatar">
<img src="./upload.jpg" width="100" />
</label>
<button>上传</button>
</form>
<script>
const form = document.querySelector('form')
const img = document.querySelector('img')
form.addEventListener('submit', function (e) {
e.preventDefault()
const formData = new FormData(this)
const xhr = new XMLHttpRequest()
xhr.open('POST', '')
xhr.send(formData)
xhr.onload = function () {
const res = JSON.parse(xhr.responseText)
img.src = res.url
}
})
</script>
</body>
四、FileReader
FileReader：读取文件，直接在本地解析文件
const fileReader = new FileReader()
<body>
<input type="file" name="avatar">
<img src="" width="100" />
<script>
const input = document.querySelector('input')
const img = document.querySelector('img')
input.onchange = function () {
const file = this.files[0]
const fileReader = new FileReader()
// 使用fileReader去解析文件内容（异步解析）
fileReader.readAsDataURL(file)
// 解析完毕
fileReader.onload = function () {
console.log(fileReader.result)
img.src = fileReader.result // fileReader.result就是解析结果
}
}
</script>
</body>
注
@千（20）[21]【b-qfqd】
