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. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

  2. 【转载】SAP_ECC6.0_EHP4或SAP_ECC6.0_EHP5_基于Windows_Server_2008R2_和SQL_server_2008下的安装

    其实这是之前Michael_z 5篇文章的集合,但作者做了一些补充 参考重要安装文档:http://www.cnblogs.com/Michael_z/category/322108.html(本博客 ...

  3. python 将base64字符串还原成图片保存

    import os,base64 strs='''/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCI ...

  4. FMC—扩展外部 SDRAM

    本章参考资料:< STM32F4xx 参考手册 2>.< STM32F4xx 规格书>.库帮助文档< stm32f4xx_dsp_stdperiph_lib_um.chm ...

  5. oracle时间操作结合to_char和to_date使用

    1,按每个10分钟进行分组展示数据 例如 有这么一张表 XATXDAY_FLIGHT(航班飞航表), 有这么一个字段 STD_LOCAL(起飞时间), 要求:统计一天24小时之内每隔10分钟,这10分 ...

  6. python学习笔记（6）--有道翻译爬虫

    说明: 1. 导入三个模块,urllib.request.urlopen用来打开url链接,urllib.parse的urlencode方法将浏览器network里的data对象转为urlopen的第 ...

  7. insert，update和delete下的注入

    PS:刚开始看到这个注入方式的时候,问米哥:“为啥updatexml就足以报错了,为啥还要使用insert?”知道答案的我觉得问了一个傻蛋的问题.不过没关系.慢慢积累.答案很简单,并不是所有的注入点程 ...

  8. Elasticsearch JVM Heap Size大于32G，有什么影响？

    0.引言 在规划ES部署的时候,会涉及到data node的分配堆内存大小,而Elasticsearch默认安装后设置的内存是1GB,对于任何一个业务部署来说,这个都太小了. 设置Heap Size的 ...

  9. 《Programming with Objective-C》第五章 Customizing Existing Classes

    1.分类里面只新增函数,不要新增变量:虽然新增是语法合法的,但是编译器并不会为你的property合成相应的成员变量.setter和getter Categories can be used to d ...

  10. mysql更改utf8编码方式

    方法1: 一.查看数据库编码格式 1 mysql> show variables like 'character_set_database'; 二.查看数据表的编码格式 1 mysql> ...