w

http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload

 <input type="file" id="files" />

 <img id="image" />

 <script type="text/javascript">

     document.getElementById("files").onchange = function () {

         var reader = new FileReader();

         reader.onload = function (e) {

             // get loaded data and render thumbnail.

             document.getElementById("image").src = e.target.result;

         };

         // read the image file as a data URL.

         reader.readAsDataURL(this.files[0]);

     };

 </script>

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

  <input id="browse" type="file" onchange="previewFiles()" multiple>

<div id="preview"></div>

 </body>

</html>

<script type="text/javascript">

<!--

function previewFiles() {

  var preview = document.querySelector('#preview');

  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria

    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {

      var reader = new FileReader();

      reader.addEventListener("load", function () {

        var image = new Image();

        image.height = 100;

        image.title = file.name;

        image.src = this.result;

        preview.appendChild( image );

      }, false);

      reader.readAsDataURL(file);

    }

  }

  if (files) {

    [].forEach.call(files, readAndPreview);

  }

}

//-->

</script>

readAsDataURL的更多相关文章

  1. readAsDataURL(file) & readAsText(file, encoding)

      readAsDataURL(file)会把文件内容转换为data类型的URL: data:text/plain;base64,b3JkZXItaWQJb3JkZXItaXRlbS1p... 这种d ...

  2. FileReader对象的readAsDataURL方法来读取图像文件

     FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Dat ...

  3. 使用readAsDataURL方法预览图片

    使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片 ...

  4. 使用FileReader对象的readAsDataURL方法来读取图像文件

    使用FileReader对象的readAsDataURL方法来读取图像文件   FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项 ...

  5. 转载：使用FileReader对象的readAsDataURL方法来读取图像文件

    文章转载自:http://blog.okbase.net/jquery2000/archive/1296.html: FileReader对象的readAsDataURL方法可以将读取到的文件编码成D ...

  6. vue使用readAsDataURL实现选择图片文件后预览

    vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...

  7. JS使用readAsDataURL读取图像文件

    JS使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片 ...

  8. JavaScript使用readAsDataURL读取图像文件

    JavaScript使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以 ...

  9. 【报错解决】Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

    项目开发日记-bug多多篇(2) 同时也是 实现一些功能(3) 真的痛苦,写一天代码遇到的bug够我写三天博客. 今天是为了做一个头像功能,具体说是用户上传头像文件并且预览的功能. <div c ...

随机推荐

  1. linux和windows动态库加载路径区别

    # linux和windows动态库加载路径区别 ### 简介------------------------------ linux加载动态库的路径是系统目录/lib和/usr/lib.- wind ...

  2. Redis的字典扩容与ConcurrentHashMap的扩容策略比较

    本文介绍Redis的字典(是种Map)扩容与ConcurrentHashMap的扩容策略,并比较它们的优缺点. (不讨论它们的实现细节) 首先Redis的字典采用的是一种‘’单线程渐进式rehash‘ ...

  3. yum whatprovides host 根据命令查找包

    [root@Cobbler ~]# yum whatprovides host Loaded plugins: fastestmirror Loading mirror speeds from cac ...

  4. 2015 Multi-University Training Contest 5 1009 MZL's Border

    MZL's Border Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=5351 Mean: 给出一个类似斐波那契数列的字符串序列 ...

  5. datagrid鼠标悬浮提示

    /** * 扩展两个方法 */ $.extend($.fn.datagrid.methods, { /** * 开打提示功能 * @param {} jq * @param {} params 提示消 ...

  6. Android性能测试框架Emmagee

    目前移动设备,尤其是Android设备,相对于过去的J2me时代,硬件有大幅度的提高,并且更新地非常快,可以安装和运行更多的应用. 但是目前安卓市场对于应用的要求并不如苹果商店那么严格,Android ...

  7. Deep learning for Human Strategic Behaviour

    没看,但是论文UI和视频做的很好. 论文地址:https://papers.nips.cc/paper/6509-deep-learning-for-predicting-human-strategi ...

  8. JAVA中所有与集合有关的实现类都是这六个接口的实现类

    JAVA中所有与集合有关的实现类都是这六个接口的实现类. Collection接口:集合中每一个元素为一个对象,这个接口将这些对象组织在一起,形成一维结构. List接口代表按照元素一定的相关顺序来组 ...

  9. (转)directx中丢失的设备(lost device)

      directx中丢失的设备(lost device) 丢失的设备 一个Microsoft? Direct3D?可以处于操作状态或丢失状态.操作状态是设备的正常状态,设备按预期运行并present所 ...

  10. 【Openwrt】刷

    设定你的电脑ip 为192.168.1.100 网线一头连接lan口,另外一头连接电脑.WAN口不能插线. 按住路由器的qss 键,开启路由器的电,灯灭掉,等6秒左右灯会再次闪几下就松开,用googl ...