文件上传

2020-04-06 本文已影响0人废弃的种子

说明

1：FileReader : 读取文件内容
readAsText() 读取文本文件，(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件，返回二进制字符串
readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件
abort: 中断读取

2：FileReader 提供一个完整的事件模型，用来捕获读取文件的状态
onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发
onloadend:文件读取完毕之后，不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发

3：FileReader 中的readAsDataURL 选择图片文件后即使预览图片

代码

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>

<body>
    <input type="file" accept="image/png,image/*" onchange="changefile(this)" placeholder="请选择图片">
    <img width="300px" src="" alt="">
</body>
<script>
    function changefile(img) {
        // 生成一个文件读取的对象
        const reader = new FileReader();
        //发起异步读取文件请求，读取结果为data:url的字符串形式，前台预览
        reader.readAsDataURL(img.files[0]);

        //读取成功后
        reader.onload = function (ev) {
            // base64码
            var imgFile = ev.target.result; //或e.target都是一样的
            document.querySelector("img").src = ev.target.result;
        }
    }
</script>

</html>