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类代码
Jun 27 Javascript
js读取注册表的键值示例
Sep 25 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
javascript的理解及经典案例分析
May 20 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
通过实例解析vuejs如何实现调试代码
Jul 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP中文编码小技巧
2014/12/25 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
解读Python中degrees()方法的使用
2015/05/18 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python科学画图代码分享
2017/11/29 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
大学生新学期计划书
2014/04/28 职场文书
期末个人总结范文
2015/02/13 职场文书
公司老总年会致辞
2015/07/30 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
python字典的元素访问实例详解
2021/07/21 Python
一起来学习Python的元组和列表
2022/03/13 Python