编程 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 相关文章推荐

javascript 文档的编码问题解决

Mar 01 Javascript

JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法

Nov 03 Javascript

easyui导出excel无法弹出下载框的快速解决方法

Nov 10 Javascript

AngularJS中一般函数参数传递用法分析

Nov 22 Javascript

基于javascript实现的购物商城商品倒计时实例

Dec 11 Javascript

a标签置灰不可点击的实现方法

Feb 06 Javascript

使用JavaScript实现在页面中显示距离2017年中秋节的天数

Sep 26 Javascript

详解javascript 变量提升（Hoisting）

Mar 12 Javascript

详解微信小程序缓存--缓存时效性

May 02 Javascript

用js简单提供增删改查接口

May 12 Javascript

基于 vue-skeleton-webpack-plugin 的骨架屏实战

Aug 05 Javascript

记一次vue跨域的解决

Oct 21 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