JavaScript使用readAsDataUrl方法预览图片


Posted in Javascript onMay 10, 2017

本文实例为大家分享了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 相关文章推荐
js控制input输入字符解析
Dec 27 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
Bootstrap table使用方法总结
May 10 #Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 #Javascript
vue-axios使用详解
May 10 #Javascript
详解axios在vue中的简单配置与使用
May 10 #Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JavaScript实现form表单的多文件上传
Mar 27 #Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 #Javascript
You might like
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php头像上传预览实例代码
2017/05/02 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
javascript按位非运算符的使用方法
2013/11/14 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python检测是文件还是目录的方法
2015/07/03 Python
Python用模块pytz来转换时区
2016/08/19 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python多进程读图提取特征存npy
2019/05/21 Python
python内存动态分配过程详解
2019/07/15 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python__new__内置静态方法使用解析
2020/01/07 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
linux面试相关问题
2012/08/11 面试题
《莫泊桑拜师》教学反思
2014/04/23 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
解除施工合同协议书
2014/10/17 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
python随机打印成绩排名表
2021/06/23 Python
如何Python使用re模块实现okenizer
2022/04/30 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS