图片上传转base64
代码：
<!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的更多相关文章
- 多图片上传（base64方式传至后台）
<!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" conten ...
- JS图片上传后base64转码
代码: // 获取文件流 var fileObj = document.getElementById('inputId').files; // 实例化一个FileReader对象 var reader ...
- PHP base64多图片上传
// 多图片上传,base64 public function upload_multi() { $pic = $_POST['pic']; if (!$pic) { $this->json-& ...
- 项目回顾3-再谈图片上传-FormData+ajax上传
上次在纠结图片上传用base64还是form表单,现在感觉好蠢,因为又开辟了第三条道路. 其实也根本用不到form 只需要一个上传文件的input就好了 <input id="file ...
- ios base64图片上传失败问题
今天做图片上传,后台用的是base64解密图片二进制文件,以前都是用表单上传来解决图片上传的,现在后台没有人改,所以研究下base64上传. 需要将图片base64加密,但是调用 [data base ...
- 利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- tp5 base64 图片上传
/** * 保存图片 */ public function uploads($value='') { // $file = base64_decode(request()->file('imag ...
- js实现图片上传预览功能，使用base64编码来实现
实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...
随机推荐
- JSON教程
一.什么是JSON 1.JSON指的是JavaScript对象表示法(JavaScript Object Notation). 2.JSON是轻量级的文本数据交换格式,比XML更小.更快.更易解析. ...
- java-el+jstl+jsbc综合示例
项目结构: 项目展示: 数据库: /* SQLyog Ultimate v12.09 (64 bit) MySQL - 5.5.53 : Database - product ************ ...
- absolute绝对定位的非绝对定位用法
总结: position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果是不一样的.例如一个div中有个absolute属性元素,其没有left或是top ...
- CSRF简单介绍及利用方法
x00 简要介绍 CSRF(Cross-site request forgery)跨站请求伪造,由于目标站无token/referer限制,导致攻击者可以用户的身份完成操作达到各种目的.根据HTTP请 ...
- ADT Android Development Tools
ADT(Android Development Tools)在Eclipse编译IDE环境中,需安装ADT(Android Developer Tools)Plug-in,这是Android在Ecli ...
- j2se j2ee j2me
多数编程语言都有预选编译好的类库以支持各种特定的功能,在Java中,类库以包(package)的形式提供,不同版本的Java提供不同的包,以面向特定的应用. Java2平台包括标准版(J2SE).企业 ...
- SAX与DOM解析XML的区别
解析xml有四种方法:DOM,SAX,DOM4j,JDOM. 我们主要学了两种:DOM和SAX. DOM适于解析比较简单的XML而SAX则适于解析较复杂的XML文件.各有各的好. DO ...
- Git：如何为项目设置自己的user name/email
在项目根目录下查找 .git/config . 打开,添加如下内容(值换成你自己的名字和邮箱)即可: [user] name = Larry email = larry_zeal@163.com
- 使用Grunt构建任务管理脚本（转）
Grunt是构建Web开发的一个系统,但它创建比较困难.在这个指南中,你将学会如何配置Grunt创建一个现代的Web项目.当你完成教程中的配置之后,你的Gruntfile将具有: 从源目录中向目标目录 ...
- Davlik虚拟机
过几天得去面试,感觉原来做的东西都忘了. 有点累,无意看了下二师兄的小论文,想来原先自己也参与过一点点,所以记录下: Dalvik虚拟机中共有3种解释器,分别时SWITCH_INTERP,THREAD ...