js 实现前端图片上传，展示缩略图功能

来源：互联网发布：老子传奇知乎编辑：程序博客网时间：2024/05/16 18:08

原理：很简单，就是监听input file表单的onchange事件。

注意：方法在ie浏览器可以实现，但是在高级浏览器非IE，就会有fakepath，图片路径加密的问题，导致显示不出上传的图片。

解决方案：

引入 FileReader

FileReader API 地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReade

    <!DOCTYPE html><html><head>    <title>文件上传图片，显示缩略图</title>    <style type="text/css">        div {            margin: 30px;        }        #mImg {            max-width: 100px;        }    </style></head><body>    <div>        <input id="mFile" type="file" name="file">    </div>    <div>        <img id="mImg" src="">    </div>    <script type="text/javascript">        document.getElementById('mFile').onchange = function (ev) {            //判断 FileReader 是否被浏览器所支持            if (!window.FileReader) return;            console.log(ev);            var file = ev.target.files[0];              if(!file.type.match('image/*')){                alert('上传的图片必修是png,gif,jpg格式的！');                ev.target.value = ""; //显示文件的值赋值为空                return;            }            var reader = new FileReader();  // 创建FileReader对象            reader.readAsDataURL(file); // 读取file对象，读取完毕后会返回result 图片base64格式的结果            reader.onload = function(e){                document.getElementById('mImg').src = e.target.result;            }        }    </script></body></html>

注意：浏览器的兼容性问题，请慎用~

阅读全文

0 0