效果如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的html5 File测试 for pic2base64</title>
<style>
*{margin: 0; padding:0;}
#result{ width: 800px; height: 100px; margin-top: 20px; display: block; }
#box{position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); top: 0; left: 0; text-align: center; line-height: 100%; padding-top: 30%; display: none;}
</style>
</head>
<body>
将图片转成base64：<input type="file" value="sdgsdg" id="demo_input" />
<textarea id="result"></textarea>
<p id="img_area"></p>
<div id="box"><img src="icon-loading.gif" /></div>
<script>
(function(){
var input = document.getElementById("demo_input");
var result= document.getElementById("result");
var img_area = document.getElementById("img_area");
var box = document.getElementById("box");
if ( typeof(FileReader) === 'undefined' ){
result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
input.setAttribute( 'disabled','disabled' );
} else {
input.addEventListener('change',readFile,false);
}
function readFile(){
box.style.display = 'block';
var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt="" width="400"/>';
box.style.display = 'none';
}
}

})();
</script>
</body>
</html>

转の-----http://www.2cto.com/kf/201308/232916.html

将上传图片转成base64（转）的更多相关文章

  1. 图片转换成Base64编码集成到html文件

    首先为什么要这么做?  原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...

  2. php和js中，utf-8编码转成base64编码

    1.php下转化base64编码 php中,文本文件的编码决定了程序变量的编码,比如以下代码在不同编码的php文件中,展示的效果也是不一样的 <?php $word = '严'; echo ba ...

  3. Base64字符保存图片，图片转换成Base64字符编码

    //文件转换成Base64编码 public static String getFileBase64Str(String filePath) throws IOException { String f ...

  4. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

  5. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  7. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  8. JS 如何将“在线图片资源”转换成“base64”

    在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...

  9. 利用PHP将图片转换成base64编码的实现方法

    先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...

随机推荐

  1. string.empty , "" , null 以及性能的比较

    一:这种结论,个人觉得仍然存疑 http://www.cnblogs.com/wangshuai901/archive/2012/05/06/2485657.html 1.null    null 关 ...

  2. jQuery选择什么版本 1.x? 2.x? 3.x?

    类似标题:jQuery选择什么版本?jquery一般用什么版本?jquery ie8兼容版本.jquery什么版本稳定? 目前jQuery有三个大版本:1.x:兼容ie678,使用最为广泛的,官方只做 ...

  3. Reactjs-JQuery-Vuejs-Extjs-Angularjs对比

    写在前面 前端越来越混乱了,当然也可以美其名曰:繁荣. 当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? 那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所适从 ...

  4. Android中的自定义控件（一）

    自定义控件是根据自己的需要自己来编写控件.安卓自带的控件有时候无法满足你的需求,这种时候,我们只能去自己去实现适合项目的控件.同时,安卓也允许你去继承已经存在的控件或者实现你自己的控件以便优化界面和创 ...

  5. 拖拽手势和清扫手势冲突时（UIPanGestureRecognizer和UISwipeGestureRecognizer冲突时）

    故事发生在这样的情境上:给整个控制器添加了一个拖拽手势,然后又在控制上的每个Cell上加了左滑清扫手势,然后问题来了:只有拖拽手势起作用,而左滑手势没有效果了,然后怎么解决这个问题呢!先上图: 当给整 ...

  6. VS插件开发 - 登录身份验证

    [附加] 很多朋友问那个VS背景怎么弄的,我刚刚已经抽时间把制作步骤发出来了: 请参见<VS插件开发 - 个性化VS IDE编辑器,瞬间 高 大 上>. 最近一直在忙着一些事情,一直没有发 ...

  7. Oracle学习笔记十 使用PL/SQL

    PL/SQL 简介 PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言,是对 SQL 的扩展,它支持多种数据类型,如大对象和集合类型,可使用 ...

  8. Oracle学习笔记五 SQL命令（三）：Group by、排序、连接查询、子查询、分页

    GROUP BY和HAVING子句 GROUP BY子句 用于将信息划分为更小的组每一组行返回针对该组的单个结果 --统计每个部门的人数: Select count(*) from emp group ...

  9. 1-1 Linux系统安装

    虚拟机下配置网络时 rhel7.2安装新建虚拟机内存2G CPU 1核2线 硬盘20G存为单个文件 使用ISO镜像 桥接网卡引导界面:    Install Red Hat Enterprise L ...

  10. Unity性能优化（2）-官方教程Diagnosing performance problems using the Profiler window翻译

    本文是Unity官方教程,性能优化系列的第二篇<Diagnosing performance problems using the Profiler window>的简单翻译. 相关文章: ...