<input type="file" id="picFile" /> 
 function readFile() {
     var obj = document.getElementById("picFile");
     if (obj.files.length < 1) {
         console.log("请选择文件");
         return;
     }
     var file = obj.files[0];
     if (!/image\/\w+/.test(file.type)) {
         console.log("请确保文件为图像类型");
         return;
     }
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function (e) {
         //console.log(e.target.result);
         console.log(this.result);
     }
 }

FileReader获取文件的base64编码的更多相关文章

  1. Java,获取文件的Base64字符串,解码Base64字符串还原文件

    在jdk1.8以前,获取文件Base64字符串需要用到第三方库,从1.8开始,Java中引入了Base64相关的类 以下是代码示例 获取文件的Base64编码字符串 import java.io.Fi ...

  2. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. JS上传图片-通过FileReader获取图片的base64

    下面文章,我想要的是: FileReader这个对象,可以借助FileReader来获取上传图片的base64,就可以在客户端显示该图片了.同时,还可以把该图片的base64发送到服务端,保存起来. ...

  4. 如何获取图片的base64编码

    1.准备一张图片,比如1.gif 2.使用chrome浏览器,新建立一个窗口,然后将a.png拖动至浏览器窗口里面,打开控制台(检查),最后点击source 3.使用方法: 注意source获取的一串 ...

  5. HTML5 通过文件输入框读取文件为base64文件, 并借助canvas压缩 FileReader, files, drawImage

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 媒体文件audio 转 base64 编码 (利用 FileReader & Audio 对象)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 获取图片base64编码的几种方法

    前文中我们聊了 Data URI 和 base64编码,稍微回顾下.base64编码 是将数据用 64 个可打印的字符进行编码的方式,任何数据底层实现都是二进制,所以都可以进行 base64编码,ba ...

  8. 图片转换base64编码,点击div的时候选择文件

    有时候我们希望文件上传的时候预览图片,下面插件可以实现上传前预览图片 (也可以提取文件的base64编码) max-height: 140px;max-width: 120px;可以指定图片的最大宽度 ...

  9. FileReader 获取图片BASE64 代码 并预览

    FileReader 获取图片的base64 代码 并预览 FileReader ,老实说我也不怎么熟悉.在这里只是记录使用方法. 方法名 参数 描述 abort none 中断读取 readAsBi ...

随机推荐

  1. DuBrute 3.1

    PS:转载自小残博客. 今天发现时隔很久的DuBrute竟然更新了,为此我在分享给大家,软件我没测试效果,使用过的朋友或许很清楚,不会太差! 曾几何时,小残也在用DUbrute爆破工具,且玩的不亦乐乎 ...

  2. Android WebView使用

    转自:http://www.cnblogs.com/oakpip/archive/2011/04/08/2009800.html 大部分内容为网上整理其它高人的帖子,现只作整理,用于查看: 在Andr ...

  3. gen_server port 调用receive_match 问题

    问题由来 前些天对系统做了一个优化,将原来从queue 轮询刷出数据后每条消息一个 spawn 进程单独处理,修改为批量刷出.一条一条刷轮询刷 queue 存在问题:刷queue 进程太多时,占用CP ...

  4. mac pods 安装

    CocoaPods的安装步骤: 1.先配置Ruby环境: 若已安装Ruby,请升级Ruby环境 sudo gem update --system 若没有安装,则请看下面, 以下代码区域,带有 $ 打头 ...

  5. Python模块之"prettytable"

    Python模块之"prettytable" 摘要: Python通过prettytable模块可以将输出内容如表格方式整齐的输出.(对于用Python操作数据库会经常用到) 1. ...

  6. VC++ : error LNK2001: unresolved external symbol "__declspec(dllimport) public: __thiscall std::basic_string<wchar_t,struct std::char_traits<wchar_t>

    最近学习Google Breakpad,将其用在了自己的项目中,编译的版本为VS2010,没有什么问题.但是为了和之前的程序兼容,需要使用VS2008版本的程序,于是又编译了VS2008版本的代码,但 ...

  7. [Sass]扩展/继承

    [Sass]扩展/继承 继承对于了解 CSS 的同学来说一点都不陌生,先来看一张图: 图中代码显示".col-sub .block li,.col-extra .block li" ...

  8. 如何去掉MyEclipse中的空格符,回车符?

    我前几天不小心把空格符合回车符显示了出来,如图: 天啊,看了两天以后,我感觉整个人都不行了,眼花缭乱,于是就各种尝试,想要去掉,就有了如下方法,其实很简单 在eclipse中的菜单的 window-& ...

  9. lvs+keepalived

    一.简介 VS/NAT原理图: 二.系统环境 实验拓扑: 系统平台:CentOS 6.3 Kernel:2.6.32-279.el6.i686 LVS版本:ipvsadm-1.26 keepalive ...

  10. PHP之session与cookie

    1.session与cookie的关系 众所周知,session是存储在服务器端,cookie是存储在客户端,如果禁用了浏览器的cookie功能,很多时候(除非进行了特殊配置)服务器端就无法再读取se ...