使用readAsDataURL预览图片

简介: 代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用FileReader接口读取文件</title>
</head>
<body>
    <script>
    function read(){
        if(typeof FileReader=='undifined')            //判断浏览器是否支持filereader
    {
        result.innerHTML="<p>抱歉,你的浏览器不支持 FileReader</p>";
        return false;
    }
    var file=document.getElementById("imagefile").files[0];
    if(!/image\/\w+/.test(file.type))            //判断获取的是否为图片文件
    {
        alert("请确保文件为图像文件");
        return false;
    }
    var reader=new FileReader();
    reader.readAsDataURL(file);
    reader.onload=function(e)
    {
        var result=document.getElementById("result");
        result.innerHTML='<img src='+this.result+' alt=""/>'
    }
    }
    </script>
    <p>
    <label>请选择一个文件:</label>
    <input type="file" id="imagefile" />
    <input type="button" value="读取图像" onClick="read();" />
</p>
<div id="result" name="result">
    <!-- 这里用来显示图片结果-->
</div>
</body>
</html>
目录
相关文章
|
7月前
|
存储 算法 C#
C# 生成指定图片的缩略图
C# 生成指定图片的缩略图
|
7月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
278 3
|
Android开发
安卓图片预览实现
安卓图片预览实现
59 0
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理
|
存储 前端开发 JavaScript
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
181 0
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
|
存储 小程序 API
小程序实现图片上传,预览以及图片base64位处理
小程序实现图片上传,预览以及图片base64位处理
542 0
小程序实现图片上传,预览以及图片base64位处理
|
Web App开发 数据安全/隐私保护 索引
文档预览功能使用技巧(4)---图片水印
智能媒体管理提供了文档预览功能,通过快速搭建文章的介绍,详细描述了使用“文档转换 + JS 前端渲染引擎”实现文档预览的过程,本文将介绍预览功能中的 图片水印(wmType=2 和 wmValue=url 参数)技巧。
2184 0
|
前端开发 JavaScript HTML5
使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览。  在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。
1919 0