效果如下：

<!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. 修改nginx配置文件解决dx2.5下载附件停止不动的问题

    在下载论坛附件的时候,总是停止在某个字数数不动 如下图 后来查看log发现 如下图 权限拒绝 发现后nginx的配置文件的启动者有关系 改了下 user 为 root 居然好了

  2. 在SharePoint 2013 之中使用JS从Add-in程序中读取用户配置文件的属性

    经过无数次的实验,只有这个程序可以运行正常 ,代码贴出来纯的JSOM,在我的实验环境老是返回未知错误,为了这一个简单的任务,我已经搞了2天了,不过终于搞出来了,使用各种方法后,还有使用代码. func ...

  3. 使用IdleTest进行TDD单元测试驱动开发演练（2）

    [前言] 1. 有关上篇请参见<使用IdleTest进行TDD单元测试驱动开发演练(1)>,有关本篇用到Entity Framework Code First请参见<使用NuGet助 ...

  4. android 启动模式介绍

    Android启动模式 (1)Task:与Android系统是个多任务的系统中的任务是不同的.后者更倾向于多进程和多线程来说的,而这里的任务与application(应用程序)和activity(活动 ...

  5. ListView之点击展开菜单

    一.概述 ListView点击item显示菜单是要实现这样的效果: 需要实现的逻辑如下: 1)点击一个普通item,展开当前菜单,同时关闭其他菜单 2)点击一个已展开的菜单,隐藏当前菜单 3)将展开菜 ...

  6. Visual Studio 生成事件命令

    Visual Studio在生成项目工程前后,有时我们需要做一些特殊的操作,比如:拷贝生成的dll到指定目标下面等. 结合VS可以添加预先生成事件和后期生成事件,采用命令或bat批处理. 1.Visu ...

  7. jdbc数据库连接过程及驱动加载与设计模式详解

    首先要导入JDBC的jar包:接下来,代码:Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类, 也就 ...

  8. AngularJS 系列 01 - HelloWorld和数据绑定

    目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...

  9. MySQL 导入数据

    MySQL中可以使用两种简单的方式来导入MySQL导出的数据. 使用 LOAD DATA 导入数据 MySQL 中提供了LOAD DATA INFILE语句来插入数据. 以下实例中将从当前目录中读取文 ...

  10. BZOJ 1717: [Usaco2006 Dec]Milk Patterns 产奶的模式 [后缀数组]

    1717: [Usaco2006 Dec]Milk Patterns 产奶的模式 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1017  Solved: ...