JavaScript使用readAsDataUrl方法预览图片

本文实例为大家分享了readAsDataUrl方法预览图片的具体代码，供大家参考，具体内容如下

<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 </head> 

 <body>
<script type="text/javascript">
  function $$(id){
    return document.getElementById(id);
  } 

  function filePrevImg(files){
    //检测浏览器是否支持FileReader对象
    if(typeof FileReader == "undefined"){
      alert("您的浏览器不支持FileReader对象！");
    }
    var strHtml = "";
    for(var intI=0;intI<files.length;intI++){
      var tmpFile = files[intI];
      var reader = new FileReader();//每循环一次都要重新new一个FileReader实例
      reader.readAsDataURL(tmpFile);
      reader.onload=function(e){
        alert(e.target.result);
        strHtml += "<img src='"+e.target.result+"' alt=''/>";
        $$("prevUpload").innerHTML = "<li>"+strHtml+"</li>";
      };
    }
  }
</script>
  </head>
  <body>
  <fieldset>
    <legend>使用readAsDataUrl()方法预览图片</legend>
    <input type="file" name="fileUpload" id="fileUpload" onchange="filePrevImg(this.files);" multiple="true" />
    <ul id="prevUpload"></ul>
  </fieldset>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript 读取图片实例代码

    Untitled Page JavaScript读取图片测试例子 '); var a = 0; var b = 1; Loading(a,b); } //显示加载失败信息 function Gif_Err() { alert("载入失败!") } //显示加载成功信息 function Gif_End() { alert("载入完成!") } //加载图片,并显示 function Loading(a,b) { //当数组元素为空时,切换数组的一维 if (!Gif

  • javascript 读取图片文件的大小

    如下: 复制代码 代码如下: function checkAttachment(){ alert("here"); var attachmentArray = document.getElementsByTagName("input"); var attachmentSizeArray = document.getElementsByName("fileMaxSize"); var index = 0; for (var i = 0; i <

  • JavaScript使用readAsDataURL读取图像文件

    FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件. 参考以下使用readAsDataURL读取图像文件

  • JavaScript使用readAsDataUrl方法预览图片

    本文实例为大家分享了readAsDataUrl方法预览图片的具体代码,供大家参考,具体内容如下 <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta nam

  • javascript input图片上传及预览,FileReader预览图片

    javascript input图片上传及预览,FileReader预览图片

    FileReader是前端进行文件处理的一个重要的Api,特别是在对图片的处理上,如果你想知道图片的处理原理,你就永远不可能绕过它. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .file-ipt{position: absolute;left

  • JS实现上传图片的三种方法并实现预览图片功能

    JS实现上传图片的三种方法并实现预览图片功能

    在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l

  • jQuery实现鼠标滑过预览图片大图效果的方法

    本文实例讲述了jQuery实现鼠标滑过预览图片大图效果的方法.分享给大家供大家参考,具体如下: 需求是这样的:  鼠标移动的图片上,同时显示预览的大图,鼠标移开,则隐藏. 原理其实很简单,首先需要一个div , 然后动态通过jQuery方法添加<img>标签,改变这个<img>的样式(宽,高),以及需要显示的图片路径. js代码: $(function(){ var ei = $("#large"); ei.hide(); $("#img1, img&

  • AngularJs上传前预览图片的实例代码

    在工作中,使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,之前查了一些资料,结合实践,得出一种比较实用的方法,相对简化版,在这里记录一下,如有不同看法,欢迎一起沟通,一起成长. demo.html: <!doctype html> <html ng-app="myTestCtrl"> <head> <meta charset="UTF-8"> <title>demo&l

  • 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

    本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览网络图片http链接的 2.预览本地图片wenxin:// 链接的 一.预览图片接口 注: 1.预览图片接口目前只支持微信手机版 2.预览图片只支持http连接,对于weixin:// 无法预览 3.预览图片的地址需要进行加密处理,尤其路径中有中文的情况下,需要使用window.encodeURI(

  • js实现的在本地预览图片功能示例

    本文实例讲述了js实现的在本地预览图片功能.分享给大家供大家参考,具体如下: 移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件:<input id="f" type="file" name="f" onchange="change()" /> 预览:<img i

  • asp.net fileupload控件上传图片并预览图片

    asp.net fileupload控件上传图片并预览图片

    本文为大家分享了fileupload控件实现上传图片后并进行预览图片的功能,并对web.config进行了配置,先看一下最终效果: 页面代码: <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1&quo

  • jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

  • js实现上传图片之上传前预览图片

    上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了.功能很简单,却很实用. 预览图片的js代码: 复制代码 代码如下: <script type="text/javascript"> function setImagePreview(docObj,localImagId,imgObjPreview) { if(docObj

随机推荐