文件上传笔记

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

一：选择单文件

<input onchange="getFile(this.files)" name="onefile" id="onefile" type="file"/>

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

二：选择多文件

<input onchange="getFileList(this.files)" name="morefile" id="morefile" type="file" multiple/>

三：预览图片

<form>
    <fieldset>
        <legend>预览图片文件：</legend>
        <input onchange="prevImageFile(this.files)" name="prevImage" id="prevImage" type="file" multiple/>
        <ul id="prevImg"></ul>
    </fieldset>
</form>


//使用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 += '<img src="' + e.target.result + '" alt=""/>';
                prevImg.innerHTML = '<li>' + html + '</li>'
            }
            reader.onloadend = function (ev) {
                console.log('操作结束，不管读取数据是否中止或失败都执行')
            }
            reader.onabort = function (ev) {
                console.log('读取文件被中止')
            }
            reader.onerror = function (ev) {
                console.log('读取文件发生异常错误')
            }
        }
    }

 

四：读取文本文件数据

<form>
    <fieldset>
        <legend>读取文本文件：</legend>
        <input onchange="getTextFile(this.files)" name="textFile" id="textFile" type="file"/>
        <div id="textFileInfo"></div>
    </fieldset>
</form>

//使用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 += '<span>' + e.target.result + '</span>'
                textFileInfo.innerHTML = html
            }
        }
    }

 

五：拖放上传文件

<form>
    <fieldset>
        <legend>拖动上传文件：</legend>
        <div ondrop="dropFile(event)" ondragenter="return false" ondragover="return false" id="prevDropFile"
             style="width: 400px;height: 400px; border: 1px #ddd solid;"></div>
    </fieldset>
</form>


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

六：使用FormData上传文件

<label for="file">选择文件</label>
<input type="file" name="file" id="file" onchange="selectFile(this.files)">
<button onclick="uploadFile()">上传文件</button>

<script>
// 获取文件
function selectFile(files) {
    console.log(files)
    var file = files[0];
    return file;
}
//上传文件
function uploadFile(file){
    var formData = new FormData()
    formData.append('file',file)
    var url = '';
    var headers = {
        'content-type':'multipart/form-data'
    };
    axios.post(url,formData,headers).then(res =>{}).catch(err =>{})
}
</script>

七 ：文件转base64上传

<label for="file">选择文件</label>
<input type="file" name="file" id="file" onchange="selectFile(this.files)">

<script>
function selectFile(files){
    var file = files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        console.log(e)
        // 读取文件的base64, 传给后台base64
        console.log(e.target.result)
    }
    reader.readAsDataURL(file);
}
</script>