使用readAsDataURL方法预览图片

https://blog.csdn.net/double215726/article/details/19154587

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过filereader接口读取文件</title>
<script type="text/javascript">
function readAsDataURL()
{
    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+‘" />‘
    }

}
</script>
</head>

<body>
<p>
    <label>请选择一个文件:</label>
    <input type="file" id="imagefile" />
    <input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
    <!-- 这里用来显示图片结果-->
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/beimingbingpo/p/9752991.html

时间: 2024-11-11 16:54:22

使用readAsDataURL方法预览图片的相关文章

plupload上传前预览图片

plupload预览图片有多种方法,主要由moxie的Image提供,Image的downsize.crop.embed都可用来预览图片 1.downsize 最开始做项目的时候,我用的就是downsize来做预览图片 downsize(opts) Downsizes the image to fit the specified width/height. If crop is supplied, image will be cropped to exact dimensions. Argume

模拟type=file;上传并预览图片

最近项目的会员中心,要做一个上传本地img并预览的效果.效果大概是这个样子.自己以前没做过:摸着石头过河总算完成了感觉有必要整理一下,写篇博客耍耍. 整体效果大概是这个样子的: 1.点击框框任何地方:弹出选择文件窗口: 2.选择后,再框框区域预览: 3.再次点击框框,更换图片. 下面说说整个实现的过程吧. html代码的结构大概是这样的.    <div class="imgitem secondImg">        <div class="u-add-

微信小程序预览图片

选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml <!--监听按钮--> <button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button> <!--通过数据绑定的方式动态获取js数据-->

Html5选择图片并及时预览图片

以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="author" content="EdieLei" /> <titl

js 本地预览图片和得到图片实际大小

//填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file.name.lastIndexOf('.')); if (file) { if (file.type.indexOf('image') == 0) { var reader = new FileReader(); reader.onload = function (e) { var image1 =

巧用weui.gallery(),点击图片后预览图片

要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 要先给图片创建一个节点: var imgDom = $("<img class='weui-jiaj-img' />"); 因为接口中取到的图片会是很多,因此,在循环图片数据的时候,要给每个图片添加一个动态的

FileUpload控件预览图片

HTML代码: <tr> <td class="auto-style1">上传图片:</td> <td> <asp:FileUpload ID="FileUpload1" runat="server" onchange="chgImg(this)" /> <div> <img src="" id="Photo"

JavaScript - 表单提交前预览图片属性

即Preview image and its properties before upload 其实这东西网上到处都是,但并不完整. 正好我也遇到了这个问题,不仅仅是预览,还需要得到图片的属性. 于是东凑西凑整理出一个完整的版本,并根据个人的理解加上了一点点说明. (ps:感谢爆栈^^) 首先做一些准备工作,HTML方面主要是img和input标签的id:     <form>         <input type='file' id="imgFile"  />

C#.net4建设网页上传图片前客户端预览图片不能显示

搞了好半天,完全照教学资料设的javascrip脚本,但就是显示不了,后来才发觉,原来客户端要把该网站设为信任才能显示. 所以记录一下,以后备查. <script type="text/javascript">        function showphoto() {            alert(document.getElementById("FileUpload1").value);            //把所选图片的全路径+文件名以“f