FileReader文件函数

最新推荐文章于 2024-07-24 11:31:03 发布

web修理工

最新推荐文章于 2024-07-24 11:31:03 发布

阅读量307

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42374676/article/details/106491530

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <!-- <button onclick="getImage()">图片预览</button> -->
    <button onclick="getfile()">本地文件预览</button>

    <script>
        // https://blog.csdn.net/lichwei1983/article/details/43893025 二进制数据的操作

        // function getImage() {
        //     let input = document.createElement('input');
        //     input.type = 'file';
        //     input.click()
        //     input.onchange = function (e) {
        //         // console.log(e.target.files);
        //         // console.log(e.target.files[0])
        //         let files = e.target.files[0]
        //         let reader = new FileReader();
        //         reader.readAsDataURL(files);
        //         reader.onload = function (e) {

        //             let saveCanvas = document.createElement("canvas");
        //             let ctx = saveCanvas.getContext("2d");
        //             // ctx.fillStyle = "rgba(255, 255, 255, 0)";
        //             let images = new Image();
        //             console.log(e.target.result)


        //             images.src = e.target.result;
        //             images.onload = function () {
        //                 ctx.drawImage(images, 0, 0);
        //                 // document.body.appendChild(images)
        //                 document.body.appendChild(saveCanvas)
        //             }
        //         }
        //     }
        // }
        // 在画布上定位图像：

        // context.drawImage(img, x, y);

        //         在画布上定位图像，并规定图像的宽度和高度：

        //         context.drawImage(img,x,y,width,height);

        // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
        // img	规定要使用的图像、画布或视频。
        // sx	可选。开始剪切的 x 坐标位置。
        // sy	可选。开始剪切的 y 坐标位置。
        // swidth	可选。被剪切图像的宽度。
        // sheight	可选。被剪切图像的高度。
        // x	在画布上放置图像的 x 坐标位置。
        // y	在画布上放置图像的 y 坐标位置。
        // width	可选。要使用的图像的宽度。（伸展或缩小图像）
        // height	可选。要使用的图像的高度。（伸展或缩小图像）
        function getfile() {
            let input = document.createElement('input');
            input.type = 'file';
            // input.accept="image/gif, image/jpeg" //规定类型 aplication/zip  https://blog.csdn.net/zhuyangru/article/details/70254789
            input.click();
            input.onchange = function (e) {
                let files = e.target.files[0];//是什么格式就是什么格式 type计算机本质对应的
                // console.log(files)
                let file = new FileReader()
                //二进制对象 数组
                file.readAsArrayBuffer(files)


                //翻译成二进制文件
                // console.log(files)
                // file.readAsBinaryString(files);

                //读取文本文件
                // let file1 = new Blob([files]);//二进制对象
                // console.log(file1)
                // file.readAsText(file1,'gbk')
                // instance of FileReader.readAsText(blob,encoding)//;
                // 参数节
                // 二进制对象
                // Blob类型 或 File类型
                // 编码类型(可选)
                // 传入一个字符串类型的编码类型，如缺省，则默认为“utf - 8”类型

                //读取文本文件
                //file.readAsText(files, "GBK");//编码格式utf-8 国际标准 日韩中通用  GBK国标中国标准(本土化)  gb2312基本汉字码
                // GBK、GB2312等与UTF8之间都必须通过Unicode编码才能相互转换：
                // GBK、GB2312－－Unicode－－UTF8
                // UTF8－－Unicode－－GBK、GB2312
                // escape()转码个式过时 十六进制  encodeURI(url) url转码 十六进制 encodeURIComponent()url 转码
                file.onload = function (e) {
                    console.log(e.target.result)
                    //查看文件内容字节大小

                }
            }
        }

        // abort(): void 终止文件读取操作
        // readAsArrayBuffer(file): void 异步按字节读取文件内容，结果用ArrayBuffer对象表示  ArrayBuffer
        // readAsBinaryString(file): void 异步按字节读取文件内容，结果为文件的二进制串   翻译成二进制文件 
        // readAsDataURL(file): void 异步读取文件内容，结果用data: url的字符串形式表示   图片路径文件
        // readAsText(file, encoding): void 异步按字符读取文件内容，结果用字符串形式表示 解读文本文件


        // 事件名称	描述
        // onabort	当读取操作被中止时调用
        // onerror	当读取操作发生错误时调用
        // onload	当读取操作成功完成时调用
        // onloadend	当读取操作完成时调用, 不管是成功还是失败
        // onloadstart	当读取操作将要开始之前调用
        // onprogress	在读取数据过程中周期性调用
    </script>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传预览</title>
<script type="text/javascript">
    function imgPreview(fileDom){
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
 
        //获取文件
        var file = fileDom.files[0];
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("preview");
            //图片路径设置为读取的图片
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
</script>
</head>
<body>
    <img id="preview" />
    <br />
    <input type="file" name="file" onchange="imgPreview(this)" />
</body>
</html>