前端上传图片预览

读取文件转为url有两种方式，一是FileReader -base64格式，二是URL.createObjectURL - blob格式，后者要比前者短很多很多，使用FileReader读取多张照片文件赋值给img后，安卓的微信明显会有感到卡顿，将整个DOM结构复制到vscode编辑器一看，编辑器也吃不消了，这样看来后者性能要好一些。兼容性问题看公司需求吧，主流的设备貌似没什么异常。<!D.

bluelotos893

136人浏览 · 2019-04-12 17:40:31

bluelotos893 · 2019-04-12 17:40:31 发布

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet">
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
    <title>测试..</title>
</head>

<body>
    <div style="width:1000px;margin:20px auto;" id="show-box">
        <input type="file" name="" id="upload-ipt">
        <div class="img-wrap">
            <img alt="" class="img">
        </div>
        <input id="browse" type="file" onchange="previewFiles()" multiple>
        <div id="preview"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
    <script>
        'use strict'
        $("#upload-ipt").on("change", function (e) {
            //previewFile()
            previewFile2()
        })

        function previewFile() { //new FileReader
            var preview = document.querySelector('.img');
            var file = document.querySelector('input[type=file]').files[0];
            console.log("file", file)
            var reader = new FileReader();

            reader.addEventListener("load", function (e) {
                preview.src = reader.result;
                console.log(dataURLtoBlob(reader.result))

                //等同于e.target.result == e.currentTarget.result == e.srcElement.result
            }, false);

            if (file && file.type.indexOf("image") == 0) {
                reader.readAsDataURL(file);
            } else {
                console.log("请上传一图片文件")
            }
        }

        function previewFile2() { //URL.createObjectURL
            var preview = document.querySelector('.img');
            var file = document.querySelector('input[type=file]').files[0];
            var blob = new Blob([file]);
            var url = (window.URL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);

            if (file && file.type.indexOf("image") == 0) {
                preview.src = url;
                preview.onload = function () {
                    (window.URL) ? window.URL.revokeObjectURL(url): window.webkitURL.revokeObjectURL(url)
                }

            } else {
                console.log("请上传一图片文件")
            }
        }

        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            var blob = new Blob([u8arr], {
                type: mime
            });
            var url = URL.createObjectURL(blob);
            return url
        }

        function previewFiles() {
            var preview = document.querySelector('#preview');
            var files = document.querySelector('#browse').files;

            function readAndPreview(file) {

                // 确保 `file.name` 符合我们要求的扩展名
                if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
                    /* var reader = new FileReader();

                    reader.addEventListener("load", function () {
                        var image = new Image();
                        image.height = 100;
                        image.title = file.name;
                        image.src = this.result;
                        preview.appendChild(image);
                    }, false);

                    reader.readAsDataURL(file); */

                    var blob = new Blob([file]);
                    var url = (window.URL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
                    var image = new Image();
                    image.height = 100;
                    image.title = file.name;
                    image.src = url;
                    preview.appendChild(image);
                    image.onload = function () {
                        (window.URL) ? window.URL.revokeObjectURL(url): window.webkitURL.revokeObjectURL(url)
                    }
                }

            }

            if (files) {
                [].forEach.call(files, readAndPreview);
            }
        }
    </script>
</body>

</html>