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. 记一次处理IE引起的上网异常处理

    win7 64bit系统,IE(11)出问题.在更新记录里找不到IE11的更新项,也就无法通过正常卸载了.而网上的各种折腾卸载方式均宣告无效.后来无意间找到了一款国外大神开发的软件:RemoveIE, ...

  2. 利用eclipse的search功能搜索当前项目的源文件

    当你项目的源文件太多,文件组织结构太复杂的的时候,有时候希望google来帮你一把?给个关键字就把相关的搜索结果给出来? eclipse的search功能基本上就可以完成这个任务,文件搜索,甚至JAV ...

  3. udacity android 实践笔记: lesson 4 part b

    udacity android 实践笔记: lesson 4 part b 作者:干货店打杂的 /titer1 /Archimedes 出处:https://code.csdn.net/titer1 ...

  4. c#生成方案里预生成拷贝文件

    我们在做项目时,可能是多人合作,这样每个人的目录层次级别是不一样的,如果用VS自带的OUTPUT输出目录,改变路径,把DLL集中生成到一个文件夹,那么不同人的机器上结果是不一样的,这就造成了,我这台机 ...

  5. 指数族分布(Exponential Families of Distributions)

    指数族分布是一大类分布,基本形式为: T(x)是x的充分统计量(能为相应分布提供足够信息的统计量) 为了满足归一化条件,有: 可以看出,当T(x)=x时,e^A(theta)是h(x)的拉普拉斯变换. ...

  6. crc32 冗余加密校验

    在数据存储和传输中使用 在ts中要对pat  和pmt 中的数据进行冗余校验 http://blog.chinaunix.net/uid-20321537-id-1966721.html

  7. 【BZOJ】1029: [JSOI2007]建筑抢修（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1029 按右端点排序后依次加入,并且每一次看是否能被修筑,如果能就修:否则查找原来修过的,如果原来修过 ...

  8. 【NOIP模拟题】Graph（tarjan+dfs）

    似乎我搞得太复杂了? 先tarjan缩点然后dfs就行了QAQ. (我不说我被一个sb错调了半个小时....不要以为缩点后dfs就可以肆无忌惮的不加特判判vis了.. bfs的做法:减反图,然后从大到 ...

  9. 【BZOJ】1627: [Usaco2007 Dec]穿越泥地（bfs）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1627 裸bfs不解释.. #include <cstdio> #include < ...

  10. git 使用手册

    git 作为开源项目首选版本管理软件,必然其优势不容小觑,下面总结一下初次解除用到的一些技能 1. 基本命令介绍 git help branch 查看branch帮助文档 git branch -a ...