JavaScript使用readAsDataUrl方法预览图片

更新时间：2017年05月10日 11:10:20 作者：liuhenghui5201

这篇文章主要为大家详细介绍了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>

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

您可能感兴趣的文章:

JavaScript 原型继承之构造函数继承
JavaScript 是基于原型的面向对象语言。也就是说，每个实例对象都具有一个原型。对象从该原型中继承属性和方法。这一篇将具体说说构造函数的继承。
2011-08-08
js汉字转拼音实现代码
汉字转拼音,比较娱乐的一款应用，感兴趣的朋友可以了解下，或许对你学习js有所帮助
2013-02-02
简单谈谈ES6的六个小特性
ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。JS社区的每个人都喜欢新的API、语法以及一些简单、明了更高效的完成重要任务的新特性。下面来一起看看吧。
2016-11-11
JS 新增Cookie 取cookie值删除cookie 举例详解
cookie很实用的一个功能，可以判断某个状态，下面与大家分享下JS 如何新增Cookie 取cookie值删除cookie，感兴趣的朋友可以参考下
2014-10-10
JavaScript 装饰器模式用法详解
装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许动态地向一个对象添加新的行为，本文将带大家详细了解一下JavaScript装饰器模式，文中有相关的示例代码供大家参考，感兴趣的同学可以跟着小编一起学习
2023-05-05
JS简单操作select和dropdownlist实例
这篇文章主要介绍了JS简单操作select和dropdownlist的方法,以实例形式讲述了js针对服务器控件select和dropdownlist的读写操作方法,是js与.net交互的典型应用实例,需要的朋友可以参考下
2014-11-11
JS实现星星评分功能实例代码(两种方法)
这篇文章主要介绍了JS实现星星评分功能实例代码(两种方法)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
js简单设置与使用cookie的方法
这篇文章主要介绍了js简单设置与使用cookie的方法,以简单实例形式分析了JavaScript设置与调用cookie的方法,需要的朋友可以参考下
2016-01-01
js返回上一页并刷新的多种实现方法
这篇文章主要介绍了js返回上一页并刷新的几种方法,需要的朋友可以参考下
2014-02-02
5分钟快速看懂ES6中的反射与代理
这篇文章主要给大家介绍了如何通过5分钟快速看懂ES6中的反射与代理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-12-12