# FileReader总结

# 预计目标

  1. 有一个上传按钮(用户点击的地方)
  2. 有一个进度条
  3. 可以预览,如果是图片的话


大概这样


# 开始

<form>
    <input type="file" id="imgInput" multiple accept="image/*">
    <br>
    <br>
    <label>读取进度:</label><progress id="progress" value="0" max="100" step="1"></progress>
    <br>
    <br>
    <img id="imgShow" src="" alt="" style="width:100px;height:100px;">
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 尽力不再使用jQuery
let imgInput = document.querySelector('#imgInput')
imgInput.addEventListener('change', function () {
    // if (!/image\/\w+/.test(file.type)) {
    //     alert("请确保文件为图像类型");
    //     return false;
    // }
    // 获取文件
    // 获取文件大小(在progress里面也有文件大小,在此获取一次,节省资源)
    // 设置进度为0
   let file = imgInput.files[0],
        totalSize = file.size,
        loaded = 0
    const fileReader = new FileReader()
    fileReader.readAsDataURL(file)
    fileReader.addEventListener('progress', function (e) {
        loaded += e.loaded;
        progress.value = (loaded / totalSize) * 100;
    })
    fileReader.addEventListener('load', function () {
        // res是base64格式
        let res = fileReader.result
        imgShow.setAttribute('src', res)
        const formDate = new FormData()
        formDate.append('userImage', file, imgInput.value.toString().split('\\').pop())
        // let config = {
        //     headers: {
        //         'Content-Type': 'multipart/form-data'
        //     }
        // }
        // axios
        //     .post('****', formDate, config)
        //     .then(res => {})
        //     .catch(err => {})
    })
})

# 支持




# 参考

  1. 图片上传方案详解 (opens new window)
  2. HTML5的FileReader的使用 (opens new window)

# 总结


FileReader

方法名 参数 描述
about none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为DataURL
readAsText file,[encoding] 将文件读取为文本

readAsText用法:readAsText(file,{encoding: "UTF-8"})

事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中