<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. 上个项目的一些反思 III

    离线缓存 之前的项目因为实时性要求比较高,所以一打开客户端,就开始做网络请求.现在想想,是没有做内容的离线缓存.这个问题,我没意识到.产品经理也没有意识到... 我觉得Archiver,来做比较合适, ...

  2. Java将TXT上的数据转换成excel里面

    package test; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; im ...

  3. Tomcat的设定

    tomcat 版本  apache-tomcat-7.0.68-windows-x64 1.解压文件到 eclipse文件夹中,这个放哪都可以,个人习惯而已 2.tomcat目录结构 图片为盗图- 3 ...

  4. (转帖)开源容器集群管理系统Kubernetes架构及组件介绍

    最近在搞Docker还有她的管理工具,选型Kuberetes后,被她的术语和概念搞得晕头转向...看了一篇文章还不错,放到这里分享出来. 地址:http://www.linuxidc.com/Linu ...

  5. c#获取外网IP地址的方法

    1.如果你是通过路由上网的,可以通过访问ip138之类的地址来获取外网IP 2.如果是通过PPPOE拨号上网的,可以使用以下代码获取IP //获取宽带连接(PPPOE拨号)的IP地址,timeout超 ...

  6. 最新Mac OS X 10.12.1 安装cocoapods及使用详解

    cocoapods官网:https://cocoapods.org 一.什么是CocoaPods 每种语言发展到一个阶段,就会出现相应的依赖管理工具,例如 Java 语言的 Maven,nodejs ...

  7. Gitlab完美安装【CentOS6.5安装gitlab-6.9.2】

    摘要: 拆腾了几天,终于在今天找到了快速安装Gitlab的方法.CentOS6.5安装gitlab-6.9.2 参考网址:https://gitlab.com/gitlab-org/omnibus-g ...

  8. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  9. Java学习笔记__异常机制_try_catch_finally_return执行顺序

    package cn.xiaocangtian.Exception; import java.io.FileInputStream; import java.io.FileNotFoundExcept ...

  10. ionic + cordova+angularJs 搭建的H5 App完整版总结

      为期半个月的项目实践开发,已完整告一段落,团队小组获得第一名,辛苦总算没有白费,想起有一天晚上,整个小组的人,联调到12点才从公司回去,真是心酸.这里总结一下,项目过程中遇到的问题 和感悟.哈哈, ...