<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. 随笔分类 - Android之工具类

    Android之文件搜索工具类 /** * @detail 搜索sdcard文件 * @param 需要进行文件搜索的目录 * @param 过滤搜索文件类型 */ private void sear ...

  2. JavaScript的模块化之AMD&CMD规范

    前端开发常常会遇到的问题: 1.恼人的命名冲突: 2.繁琐的文件依赖: 模块化开发的优势: 1.解决命名冲突和依赖管理: 2.模块的版本管理: 3.提高代码的可维护性: 4.前端性能优化: JavaS ...

  3. getPx function

    function getPX(str){  return str.substring(0,str.indexOf('px'));}

  4. 【Python文件处理】递归批处理文件夹子目录内所有txt数据

    因为有个需求,需要处理文件夹内所有txt文件,将txt里面的数据筛选,重新存储. 虽然手工可以做,但想到了python一直主张的是自动化测试,就想试着写一个自动化处理数据的程序. 一.分析数据格式 需 ...

  5. XCode8向ITunes提交版本,不显示或提示无效的版本

    主要是iOS10,对隐私权限有了新的要求.在info.plist里加入如下代码. <key>NSCameraUsageDescription</key> <string& ...

  6. css3伪类、伪元素选择器---nth-child()和nth-of-type()选择器的区别

    p:nth-child(2) 要满足两个条件,1:选择的是p元素的父元素的第二个子元素   2:选择的第二个子元素必须是p元素,如果不满足,则将不显示 p:nth-of-type(2) 选择父元素下的 ...

  7. 解决JSP页面获取的数据库数据乱码问题

    将java项目部署到服务器,页面数据乱码: 解决:首先查看了数据库编码和jsp编码都是utf-8,说明jsp和数据库没问题,于是查看了tomcat设置的编码 没有设置编码,于是加了URIEncodin ...

  8. 安装第三方APP好的站点及解除安全与隐私限制

    一.解除安全与隐私限制的任何来源. http://bbs.feng.com/read-htm-tid-10714286.html 接下来,我们就打开终端,然后输入以下命令:   sudo spctl ...

  9. 《转载》使用org.w3c.dom.Element的setTextContent()、getTextContent()方法时出现编译错误

    今天在更新项目后进行编译时,出现如下错误一堆: 编译错误 Google之,在stackoverflow上看到如下的解决方法: I came here with the same problem. Ev ...

  10. 在一个aspx或ashx页面里进行多次ajax调用

    在用ajax开发asp.net程序里.利用ashx页面与前台页面进行数据交互.但是每个ajax交互都需要一个ashx页面.结果是项目里一大堆ashx页面.使项目难以管理.现在我们就想办法让一个ashx ...