代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 图片转Base64</title>
<script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script>
function run(input_file,get_data){
/*input_file:文件按钮对象*/
/*get_data: 转换成功后执行的方法*/
if ( typeof(FileReader) === 'undefined' ){
alert("抱歉,你的浏览器不支持 FileReader,不能将图片转换为Base64,请使用现代浏览器操作!");
} else {
try{
/*图片转Base64 核心代码*/
var file = input_file.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.onload = function(){
get_data(this.result);
}
reader.readAsDataURL(file);
}catch (e){
alert('图片转Base64出错啦!'+ e.toString())
}
}
}
$(function () {
$("input").change(function () {
run(this, function (data) {
$('img').attr('src',data);
$('textarea').val(data);
});
});
});
</script>
</head>
<body>
<input type="file">
<hr>
<img style="max-height: 300px; height: 8em; min-width:8em;">
<hr>
<textarea style="display: block; width: 100%;height: 30em;"></textarea>
</body>
</html>

参考地址:

http://www.cnblogs.com/wujingtao/p/5196836.html

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

  1. 多图片上传(base64方式传至后台)

    <!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" conten ...

  2. JS图片上传后base64转码

    代码: // 获取文件流 var fileObj = document.getElementById('inputId').files; // 实例化一个FileReader对象 var reader ...

  3. PHP base64多图片上传

    // 多图片上传,base64 public function upload_multi() { $pic = $_POST['pic']; if (!$pic) { $this->json-& ...

  4. 项目回顾3-再谈图片上传-FormData+ajax上传

    上次在纠结图片上传用base64还是form表单,现在感觉好蠢,因为又开辟了第三条道路. 其实也根本用不到form 只需要一个上传文件的input就好了 <input id="file ...

  5. ios base64图片上传失败问题

    今天做图片上传,后台用的是base64解密图片二进制文件,以前都是用表单上传来解决图片上传的,现在后台没有人改,所以研究下base64上传. 需要将图片base64加密,但是调用 [data base ...

  6. 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  7. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. tp5 base64 图片上传

    /** * 保存图片 */ public function uploads($value='') { // $file = base64_decode(request()->file('imag ...

  9. js实现图片上传预览功能,使用base64编码来实现

    实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...

随机推荐

  1. 4种用于构建嵌入式linux系统的工具_转

    转自:4种用于构建嵌入式linux系统的工具 Linux 被部署到比 Linus Torvalds 在他的宿舍里开发时所预期的更广泛的设备.令人震惊的支持了各种芯片,使得Linux 可以应用于大大小小 ...

  2. iOS边练边学--CALayer,非根层隐式动画,钟表练习

    一.CALayer UIView之所以能显示在屏幕上,完全是因为他内部的一个图层 在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性 ...

  3. 逻辑斯特回归(logistic regression)的迭代变权最小平方差算法(IRLS)

    参考资料:http://blog.csdn.net/xuanyuansen/article/details/41050507 习题: 数据及代码:  https://pan.baidu.com/s/1 ...

  4. Zookeeper 应用程序

    Zookeeper为分布式环境提供灵活的协调基础架构.ZooKeeper框架支持许多当今最好的工业应用程序.我们将在本章中讨论ZooKeeper的一些最显着的应用. 雅虎 ZooKeeper框架最初是 ...

  5. R语言低级绘图函数-rect

    rect 函数用来在一张图上添加矩形,只需要指定左下角和右上角的坐标的位置,就可以画出一个矩形 基本用法: plot(1:5, 1:5, xlim = c(0,6), ylim = c (0,6), ...

  6. CentOS安装Emacs文本编辑器

    我这里安装的是:emacs.24.2 下载地址:http://ftp.gnu.org/pub/gnu/emacs/emacs-24.2.tar.gz 下载文件:emacs-24.2.tar.gz 步骤 ...

  7. 不错的源码演示:admin5源码

    admin5源码官网:http://down.admin5.com/ 集资讯,源码,字体,itchat于一体的网站,可以下载喔! 实际项目中可以用得到.

  8. App 应用通过网页打开 App Store

    NSURL *url = nil; if ([[[UIDevice currentDevice] systemVersion] intValue] >= 7.0) { //iOS7 使用旧的网址 ...

  9. Ubuntu Server 下配置静态网络的方法

    这几天一直在弄hadoop的集群,由于公司的网络原因,偶尔要重启路由器,如果网络是由路由器自动配置的话, 非常容易变换IP,这样的话,SSH无密码验证登陆到其他机器发送的配置文件*.pub就用不了,因 ...

  10. SharePoint 2013 workflow cannot start automatically when you logged in site as a system account

    I have created one simple workflow on custom list using SharePoint designer 2013.While designing wor ...