编程 Javascript

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>

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

- Author -

liuhenghui5201

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

juqery 学习之六 CSS--css、位置、宽高

Feb 11 Javascript

一个简单的瀑布流效果(主体形式自写)

May 27 Javascript

js中创建对象的几种方式示例介绍

Jan 26 Javascript

javascript 构造函数方式定义对象

Jan 02 Javascript

Javascript中的方法和匿名方法实例详解

Jun 13 Javascript

javascript插件开发的一些感想和心得

Feb 28 Javascript

jQuery快速实现商品数量加减的方法

Feb 06 Javascript

extjs简介_动力节点Java学院整理

Jul 17 Javascript

Vue导出json数据到Excel电子表格的示例

Dec 04 Javascript

vue登录注册及token验证实现代码

Dec 14 Javascript

基于Swiper实现移动端页面图片轮播效果

Dec 28 Javascript

React如何创建组件

Jun 27 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