html5的FileReader实现图片上传预览并生成base64

最新推荐文章于 2024-02-05 14:03:02 发布

丁TT

最新推荐文章于 2024-02-05 14:03:02 发布

阅读量1.3k

点赞数

文章标签： html5 FileReader 图片上传 base64

本文链接：https://blog.csdn.net/u010035608/article/details/52240420

版权

关于FileReader

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

检测浏览器对FileReader的支持

if(window.FileReader) {  
    var reader = new FileReader();   
}  
else {  
    alert("你的浏览器不支持FileReader接口！");  
}

FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

FileReader接口事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

上传图片预览

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="telephone=no, email=no" />
        <meta name="full-screen" content="true" />
        <meta name="screen-orientation" content="portrait" />
        <meta name="x5-fullscreen" content="true" />
        <meta name="360-fullscreen" content="true" />
        <title>图片上传预览及生成base64</title>
        <style>
            /*图片上传*/

            .img-upload-con {
                position: relative;
                margin: 0 auto;
                width: 80px;
                height: 80px;
                overflow: hidden;
                border: 1px solid #CCCCCC;
            }

            .uploader_input_wrp {
                margin: 0;
                position: absolute;
                left: 50%;
                top: 50%;
                width: 80px;
                height: 80px;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .uploader_input {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                cursor: pointer;
            }

            .uploader_input_wrp:before,
            .uploader_input_wrp:after {
                content: " ";
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                background-color: #D9D9D9;
            }

            .uploader_input_wrp:before {
                width: 1px;
                height: 15px;
            }

            .uploader_input_wrp:after {
                width: 15px;
                height: 1px;
            }

            .img-pre-con {
                width: 100%;
            }

            .img-pre-con img {
                width: 100%;
                margin-top: 10px;
            }
        </style>
    </head>

    <body>
        <h4>图片上传预览及生成base64</h2>
        <div class="img-pre-con">
        </div>
        <div class="img-upload-con">
            <div class="uploader_input_wrp">
                <input type="file" class="upload-photo uploader_input" id="supervise_photo" name="upload$photo" placeholder="上传图片" capture="camera" accept="image/*">
            </div>
        </div>
        <script>
            var imgNum = 0;
            document.querySelector('.upload-photo').addEventListener('change', function() {
                var imgData = {};
                if(document.querySelector(".upload-photo").files && document.querySelector(".upload-photo").files[0]) {
                    var file = document.querySelector(".upload-photo").files[0];
                     //检验是否为图片文件 
                     if(!/image\/\w+/.test(file.type)) {
                        alert("看清楚，这个需要图片！");
                        return false;
                     }
                     imgNum++;
                     var imgObj = document.createElement('img');
                    imgObj.classList.add('img-pre' + imgNum);
                    var html = '<img class="img-pre' + imgNum + '" src="" alt="" />'
                    document.querySelector(".img-pre-con").appendChild(imgObj);
                    imgData.fileName = file.name;
                    imgData.fileSize = file.size;
                    imgData.fileType = file.type;
                    imgData.base64 = {};
                    readURL(document.querySelector(".upload-photo"), document.querySelector('.img-pre' + imgNum), imgData);
                    console.log('imgData', imgData);
                    //其他操作...
                }
            });

            function readURL(input, tmpimg, imgData) {
                if(input.files && input.files[0]) {
                    var reader = new FileReader();
                    //注册onload事件
                    reader.onload = function(e) {
                            if(!/image/.test(e.target.result)) {
                                alert('请上传图片格式...');
                                return false;
                            }
                            tmpimg.setAttribute('src', e.target.result);
                            //console.log(e.target.result);
                            imgData.base64 = e.target.result;
                        }
                        //读取文件成为二进制流
                    reader.readAsDataURL(input.files[0]);
                }
            };
        </script>
    </body>
</html>

Demo地址

图片上传预览及生成base64

丁TT

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5的FileReader实现图片上传预览并生成base64

利用html5的FileReader实现图片上传预览并生成base64。HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
复制链接

扫一扫