图片上传转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信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...
随机推荐
- System.map
System.map是一个特定内核的内核符号表.它是你当前运行的内核的System.map的链接. 内核符号表是怎么创建的呢? System.map是由“nm vmlinux”产生并且不相关的符号被滤 ...
- SSM 整合
--- 分为三层: DAO层:负责与数据源进行交互 Service:业务处理层,也可称为服务层,对上层提供统一接口的服务. Controller: 控制器层,负责处理来自客户端的请求. 通用配置: d ...
- nginx connect() failed,Connection refused,while connecting to upstream fastcgi
connect() failed (111: Connection refused) while connecting to upstream fastcgi://127.0.0.1:9000 net ...
- arduino~snprintf
#include <stdio.h> printf, fprintf, sprintf, snprintf, vprintf, vfprintf, vsprintf, vsnprintf ...
- 关于Cocos2d-x中对其他某个类的某个属性的获得
类A要获得类B中的某个属性,可以是节点属性 方法一 1.先在B类中定义一个_edge的节点属性(可以在B类中进行各种对_edge的操作),然后写一个方法Node* GameController::ge ...
- 奇怪的bug：javascript不执行
背景:有人想要个简单的js效果,点击某个菜单,其他菜单收起. 说了下思路,结果~~ 只好直接写了一个,代码如下: <!DOCTYPE html> <html> <head ...
- e651. 列出所有可用字体
A font family refers to a set of font faces with a related typographic design. For example, the font ...
- $.ajax的一般用法
$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...
- SQL Server死锁的解除方法
如果想要查出SQL Server死锁的原因,下面就教您SQL Server死锁监控的语句写法,如果您对此方面感兴趣的话,不妨一看. 下面的SQL语句运行之后,便可以查找出SQLServer死锁和阻塞的 ...
- ubuntu普通用户无法使用usdo命令
1.切换到root用户下,怎么切换就不用说了吧,不会的自己百度去. 2.添加sudo文件的写权限,命令是: chmod u+w /etc/sudoers 3.编辑sudoers文件 vi /etc/s ...