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. cocos2d-x与ISO内存管理(转)

    一,IOS与图片内存 在IOS上,图片会被自动缩放到2的N次方大小.比如一张1024*1025的图片,占用的内存与一张1024*2048的图片是一致的.图片占用内存大小的计算的公式是:长*宽*4.这样 ...

  2. python右键不显示IDLE

    打开注册表,在HKEY_CLASSES_ROOT\SystemFileAssociations中添加.py\shell\Edit with IDLE\command(右键 ->‘新建’ -> ...

  3. with as 和update ,Delete，insert

    这个SQL写了很久的时间,感觉pgSQL的很是麻烦. with as 先命名一个表出来,就可以当成临时表用. WITH tmp AS ( SELECT MAX(mgi.inner_cd) AS inn ...

  4. MyBatis Geneator详解<转>

    MyBatis Geneator中文文档地址: http://generator.sturgeon.mopaas.com/ 该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看中文版的文档的 ...

  5. keepalive脑裂的处理,从节点发现访问的虚拟IP就报警,同时尝试发送内容到主节点服务器关闭keepalive和nginx,或者关机

    解决keepalived脑裂问题   检测思路:正常情况下keepalived的VIP地址是在主节点上的,如果在从节点发现了VIP,就设置报警信息 脚本如下: 1 2 3 4 5 6 7 8 9 10 ...

  6. C++ 百炼成钢20

    题目56: 编写C++程序完成以下功能:(1)定义一个Point类,其属性包括点的坐标,提供计算两点之间距离的方法:(2)定义一个圆形类,其属性包括圆心和半径:(3)创建两个圆形对象,提示用户输入圆心 ...

  7. socket udp广播和多播的简单实现

    UDP广播与多播 作者:legend QQ:1327706646 使用UDP协议进行信息的传输之前不需要建议连接.换句话说就是客户端向服务器发送信息,客户端只需要给出服务器的ip地址和端口号,然后将信 ...

  8. AJAX解惑篇（转）

    这篇文章会使你对AJAX有一个基本了解,并给出两个容易上手的例子. 什么是AJAX AJAX是一个新的合成术语,隐含了两个已经存在多年的JavaScript特性,但是直到最近,随着一些诸如Gmail. ...

  9. PHP curl_setopt函数用法介绍中篇

    此篇已实例为主. 一.一般的实例 demo1.php <?php $user = "admin123"; $pass = "admin456"; // $ ...

  10. Amazon（iam）IAM用户启用MFA

    1.1 下载MFA软件 我这里选择Google的Authenticator 1.2 进入IAM 搜索IAM,点击进入 1.3 选择需要设置MFA的用户 1.4 选择安全证书 1.5 管理MFA设置 这 ...