FileReader總結

2019第一發

預計目標

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. 圖片上傳方案詳解
2. HTML5的FileReader的使用

總結

FileReader

方法名	參數	描述
about	none	中斷讀取
readAsBinaryString	file	將文件讀取爲二進制碼
readAsDataURL	file	將文件讀取爲DataURL
readAsText	file,[encoding]	將文件讀取爲文本

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

事件	描述
onabort	中斷時觸發
onerror	出錯時觸發
onload	文件讀取成功完成時觸發
onloadend	讀取完成觸發，不管成功或失敗
onloadstart	讀取開始時觸發
onprogress	讀取中