图片上传转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信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...
随机推荐
- Apache HttpComponents 文件上传例子
/* * ==================================================================== * * Licensed to the Apache ...
- java——多线程的实现
package test; class TestThread extends Thread{ public void run() { for(int n=0;n<3;n++) { try{Thr ...
- MVC教程二：从控制器中获取URL的值
一.从控制器中获取URL的值有三种方式: 1.使用Request.QueryString[] 例如: string value = Request.QueryString["BookId&q ...
- [从jQuery看JavaScript]-JavaScript
什么是JavaScript?相信随便百度Google一下都能找到一大堆的定义解释.而在我的理解中,JavaScript就是一种客户端的脚本语言,用于处理页面数据逻辑和用户体验(网页特效).实际上,Ja ...
- vue2.0动态添加组件
方法一.<template> <input type="text" v-model='componentName'> <button @click=' ...
- 控制反转是Spring框架的核心。
早在2004年,Martin Fowler就提出了“哪些方面的控制被反转了?”这个问题.他总结出是依赖对象的获得被反转了.基于这个结论,他为控制反转创造了一个更好的名字:依赖注入.许多非凡的应用(比H ...
- unity3d绘画手册-------灯光之反射及各个参数解释
下面说一下Reflection Probe, 大家都知道:当使用标准着色器时,每一个材质都会具有一定程度的镜面反射(specularity)和金属反射 (metalness)属性,在没有强大的硬件来处 ...
- 基于swoole扩展实现真正的PHP数据库连接池
转自: http://rango.swoole.com/archives/265 PHP的数据库连接池一直以来都是一个难题,很多从PHP语言转向Java的项目,大多数原因都是因为Java有更好的连接 ...
- oracle 死锁和锁等待的区别
所谓的锁等待:就是一个事务a对一个数据表进行ddl或是dml操作时,系统就会对该表加上表级的排它锁,此时其他的事务对该表进行操作的时候会等待a提交或是回滚后,才可以继续b的操作 所谓的死锁:当两个或多 ...
- Android SDK的安装教程
Android4.1虽说已经发布了好些天,但由于的我手机比较坑,系统依旧保持在2.3.4.0的都是可望不可即的了,就别说4.1.由于资金的问题,没法换手机,只能另想方法,通过在笔记本上装andro ...