通过FileReader实现多张图片转换成base64、上传、预览、删除

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file（blob）	将文件读取为二进制码
readAsDataURL	file（blob）	将文件读取为 DataURL
readAsText	file, （blob）	将文件读取为文本

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fileReader</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style lang="">
        .upload {
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: relative;
            background-color: orange;
        }
        
        .file {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        
        .outbox {
            position: relative;
            display: inline-block;
        }
        
        .outbox img {
            width: 200px;
            height: 200px;
        }
        
        .delete {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 0;
            right: 0;
            background: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1381865013,3042801585&fm=27&gp=0.jpg) center no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="upload">上传
        <input type="file" multiple class="file" id="imgfile">
    </div>
    <div id="previewImg"></div>
    <button id="btn">提交</button>
    <script>
        var input = document.getElementById("imgfile");
        var urlArr = [];
        //检测浏览器是否支持FileReader
        if (typeof(FileReader) === 'undefined') {
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
            input.setAttribute('disabled', 'disabled');
        } else {
            //开启监听
            input.addEventListener('change', readFile, false);
        }

        function readFile() {
            var files = this.files;
            var index = 0;

            for (var i = 0; i < files.length; i++) {
                //限定上传文件的类型，判断是否是图片类型 
                if (!/image\/\w+/.test(files[i].type)) {
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(files[i]);
                reader.onload = function(e) {
                    var preview = document.getElementById("previewImg");
                    var div = document.createElement('div');
                    var span = document.createElement('span');
                    div.setAttribute('class', 'outbox');
                    span.setAttribute('class', 'delete');
                    span.setAttribute('data-value', index++);
                    var img = document.createElement('img');
                    // img.width = 200;
                    // img.height = 200;
                    img.src = this.result; //把得到的base64赋值到img标签显示
                    div.appendChild(img);
                    div.appendChild(span);
                    preview.appendChild(div);
                    urlArr.push(this.result);
                };

            }

        }
        //删除图片操作
        $('#previewImg').on('click', 'span', function() {
            urlArr.splice($(this).attr('data-value'), 1);
            var html = '';
            for (var j = 0; j < urlArr.length; j++) {
                html += "<div class = 'outbox'><img src=" + urlArr[j] + "><span class='delete' data-value=" + j + "></span></div>";
            }
            $('#previewImg').html(html);
        })
        $('#btn').click(function() {
            console.log(urlArr);
        })
    </script>
</body>

</html>

通过FileReader实现多张图片转换成base64、上传、预览、删除

猜你喜欢