文件上传笔记

/*
* 使用FileReader接口读取文件
* 一：FileReader接口的常用方法
* readAsBinaryString(file): 以二进制的方式读取文件内容
* readAsArrayBuffer(file):  以数组缓冲的方式读取文件内容
* readAsDataURL(file):      以数据URL的方式读取文件内容
* readAsText(file,encoding) 以文本编码的方式读取文件内容
* abort()                   读取数据中止时，将自动触发该方法,返回异常信息
*
* 二：FileReader接口事件/生命周期
* onloadstart    读取数据开始时触发
* onprogress     正在读取数据时触发
* onabort        读取数据中止时触发
* onerror        读取数据失败时触发
* onload         读取数据成功时触发
* onloadend      请求操作成功时触发，无论操作是否成功，都触发
*
* 文件正常读取时流程：onloadstart -> onprogress -> onload -> onloadend
* */

一：选择单文件

//获取文件信息 name size type
function getFile(f) {
    console.log(f)
}

二：选择多文件

三：预览图片

    

        
预览图片文件：
        
        

    



//使用readAsDataURL方法预览图片
    function prevImageFile(f) {
        console.log(f)
        if (typeof FileReader == 'undefined') {
            console.log('不支持FileReader对象')
        }
        var prevImg = document.getElementById('prevImg');
        var html = '';
        for (var i = 0; i < f.length; i++) {
            var itemFile = f[i];
            //每次读取文件前，都必须先重新实例新的FileReader对象
            var reader = new FileReader();
            reader.readAsDataURL(itemFile);
            reader.onloadstart = function (ev) {
                console.log('开始读取文件')
            }
            reader.onprogress = function (ev) {
                console.log('正在读取文件')
            }
            reader.onload = function (e) {
                console.log('成功读取文件')
                console.log(e)
                html += '';
                prevImg.innerHTML = '
' + html + '
'
            }
            reader.onloadend = function (ev) {
                console.log('操作结束，不管读取数据是否中止或失败都执行')
            }
            reader.onabort = function (ev) {
                console.log('读取文件被中止')
            }
            reader.onerror = function (ev) {
                console.log('读取文件发生异常错误')
            }
        }
    }

 

四：读取文本文件数据

    

        
读取文本文件：
        
        

    


//使用readAsText方法读取文本文件
    function getTextFile(f) {
        console.log(f)
        if (typeof FileReader == 'undefined') {
            console.log('不支持FileReader')
        }
        var textFileInfo = document.getElementById('textFileInfo');
        var html = '';
        for (var i = 0; i < f.length; i++) {
            var itemFile = f[i];
            var reader = new FileReader();
            reader.readAsText(itemFile)
            reader.onload = function (e) {
                console.log(e)
                html += '' + e.target.result + ''
                textFileInfo.innerHTML = html
            }
        }
    }

 

五：拖放上传文件

    

        
拖动上传文件：
        

    



//使用DataTransfer对象拖放上传图片文件
    function dropFile(e) {
        //预览图片
        prevImageFile(e.dataTransfer.files);
        e.stopPropagation();
        e.preventDefault();
    }

六：使用FormData上传文件

选择文件

上传文件

七 ：文件转base64上传

选择文件