记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能。当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能。
今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上。
1、闲话少说,测试一下,图片上传前预览(选择图片):
实现代码:
<div style="border:2px dashed red;"> <p> 图片上传前预览:<input type="file" id="xdaTanFileImg" οnchange="xmTanUploadImg(this)" accept="image/*"/> <input type="button" value="隐藏图片" οnclick="document.getElementById('xmTanImg').style.display = 'none';"/> <input type="button" value="显示图片" οnclick="document.getElementById('xmTanImg').style.display = 'block';"/> </p> <img id="xmTanImg"/> <div id="xmTanDiv"></div> </div> <hr /> <script type="text/javascript"> //判断浏览器是否支持FileReader接口 if (typeof FileReader == 'undefined') { document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>"; //使选择控件不可操作 document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled"); } //选择图片,马上预览