【Js应用实例】图片预览

攻城狮子硕技术 2022年11月21日

0 收藏 574 点赞 3,577 浏览 1462 个字

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>图片预览</title></head><body>    <!--        文件上传在现代浏览器是基于FileReader API        基于浏览器的安全策略，file标签在现在浏览器中已获取不到真实路径。而低版本ie可以获取到真实路径        FileReader有四种读取文件的方式            1.readAsBinaryString读取为二进制码            2.readAsDataURL 读取为DataURL            3.readAsText读取为文本            4.readAsArrayBuffer 读取为队列缓存        图片上传后的需求，需要将图片读取为DataURL,DataURL的固定格式，        例如：data:[文件格式];base64,[文本流base64编码]            1.jpg格式: data:image/jpeg;base64,/9j/4...            2.png:data:image/png;base64,iVBORw...            3.gif:data:image/gif;base64,R0IGOD...     -->     <input id="files" type="file" onchange="previewImage(this,'prvid')",multiple="multiple"/>     <div id="prvid">预览容器</div></body><script type="text/javascript">    function previewImage(file,prvid){        /*            file:file控件            prvid:图片预览容器        */        var tip = "Expect jpg or png or gif!";        var filters = {                "jpeg":"/9j/4",                "gif":"R0IGOD",                "png":"iVBORw"        };        var prvbox = document.getElementById(prvid);        prvbox.innerHTML = "";        //浏览器支持FileReader        if(window.FileReader){            for(var i=0,f;f=file.files[i];i++){                var fr = new FileReader();                fr.onload = function(e){                    var src = e.target.result;                    //验证没通过                    if(!validateImg(src)){                        alert(tip);                    }else{                    //验证通过                        showPrvImg(src);                    }                };                fr.readAsDataURL(f);            }        //浏览器不支持FileReader        }else{            if(!/\.jpg$|\.png$|\.gif$/i.test(file.value)){                alert(tip);            }else{                showPrvImg(file.value);            }        }        //验证图片        function validateImg(data){            var pos = data.indexOf(",")+1;            for(var e in filters){                if(data.indexOf(filters[e])===pos){                    return e;                }            }            return null;        }        //展示图片        function showPrvImg(src){            var img = document.createElement("img");            img.src = src;            prvbox.appendChild(img);        }    }</script></html>