代码:

// 获取文件流
var fileObj = document.getElementById('inputId').files;
// 实例化一个FileReader对象
var reader = new FileReader();
// 创建一个img
var img = $('<img />');
reader.onload = function (e) {
img.attr('src', e.target.result);
$('#selector').append(img);
}
// base64转码
reader.readAsDataURL(fileObj);

JS图片上传后base64转码的更多相关文章

  1. js实现图片上传后即时预览

    //关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...

  2. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  3. 分离与继承的思想实现图片上传后的预览功能:ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  4. js图片上传 的方法

    先规划出框架 <div id="AQA" style="width:300px; height:200px; background-color:aquamarine ...

  5. 前端js图片上传

    前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...

  6. 改变wordpress图片上传后的压缩质量

    WordPress 在图片上传后会默认压缩图片质量为原来的 90%,这样做的好处可以极大的加快页面的载入速度与缩小图片大小所占服务器空间. 如果希望 100% 原质量怎么办呢?如何禁止 WordPre ...

  7. django实现图片上传后自动修改尺寸并保存修改后的图到数据库和本地文件系统

    图片上传首先要是设置settings.py文件(与静态文件设置类似) MEDIA_ROOT = os.path.join(BASE_DIR,'media')MEDIA_URL = '/media/' ...

  8. 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  9. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

随机推荐

  1. BZOJ 1646: [Usaco2007 Open]Catch That Cow 抓住那只牛( BFS )

    BFS... -------------------------------------------------------------------------------------------- ...

  2. codeblocks + MinGW 以及vc 使用预编译头文件的方法

    MinGW编译器: 1.打开工程文件,在工程文件浏览其中,在你要设置为预编译的头文件上,点击鼠标右键,选择“属性(properties)”  你会看到一个多页面的属性框,选择“构建(build)”页面 ...

  3. c显示数字的LED(数字转LED)

    实现这么一个函数:传入一个int值,在屏幕输出类似LED显示屏效果的字母拼图,例如: 输入1234567890,输出: 请注意每个字符的固定宽度和高度,两个数字间保留一个空格. 函数名:void LE ...

  4. 复习知识点:TabBarViewController(微信框架)

    TabBarViewController:标签视图控制器 在application设置 创建四个视图控制器 引入视图控制器头文件 #import "AppDelegate.h" # ...

  5. 【数据库摘要】5_Sql_IN

    IN 操作符 IN 操作符同意您在 WHERE 子句中查找多个值. SQL IN 语法 SELECT column_name(s) FROM table_name WHERE column_name ...

  6. 【web开发学习笔记】Structs2 Result学习笔记(三)带參数的结果集

    Result学习笔记(三)带參数的结果集 第一部分:代码 //前端 <head> <meta http-equiv="Content-Type" content= ...

  7. ThinkPHP - CURD增删改查操作

    public function show(){ //使用model模型 //1.可以使用 $user = new Model('User'); //2.可以使用 $user = M('User'); ...

  8. CentOS下配置多个Tomcat同时运行 本篇文章来源于 Linux公社网站(www.linuxidc.com)

    原文地址:http://blog.csdn.net/tjcyjd/article/details/46553361 版权声明:本文为博主原创文章,未经博主允许不得转载. 同一服务器部署多个tomcat ...

  9. hdu2629Identity Card

    Problem Description Do you own an ID card?You must have a identity card number in your family's Hous ...

  10. 20150706 js之定时器

    对应智能社:09 定时器的使用 开启定时器: setInterval(xxx(),1000);//间隔型 第一个参数为函数,第二个为时间,单位为毫秒 setTimeout(xxx(),1000);// ...