base64和图片的互转（HTML5的File实现)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的html5 File测试 for pic2base64</title>
<style>
</style>
<script>
window.onload = function(){
var input = document.getElementById("demo_input");
var result= document.getElementById("result");
var img_area = document.getElementById("img_area");
if ( typeof(FileReader) === 'undefined' ){
result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
input.setAttribute( 'disabled','disabled' );
} else {
input.addEventListener( 'change',readFile,false );}
}
function readFile(){
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=""/>';
result.innerHTML = this.result;
//img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
img_area.innerHTML = '<img src="'+this.result+'" alt=""/>'
}
}
</script>
</head> <body>
<input type="file" value="fenjin" id="demo_input" />
<textarea id="result" rows=30 cols=300></textarea>
<p id="img_area"></p>
</body>
</html>
base64和图片的互转（HTML5的File实现)的更多相关文章
- 使用HTML5的File实现base64和图片的互转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bolb与base64的图片互转
直接看图简单明了. 注:便于测试你可以自己用base64图片测试互转一下.这里base64图片太长了就不给予展示了,望理解
- base64和图片互转
pom.xml添加 <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec --> <dependen ...
- 字节组数（二进制流）、Base64、图片（文件）、二进制相互之间转换
using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; ...
- 页面以base64输出图片
<% //读取文件路径,输出base64 编码 System.IO.FileStream stream = System.IO.File.OpenRead(ViewBag.FilePath); ...
- base64和图片的转换
/// <summary> /// base64转图片 /// </summary> /// <param name="strBase64">& ...
- File控件选择图片的时候在Html5下马上预览
页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...
- 通过data:image/png;base64把图片直接写在src里
从网上下了个源文件查看时候发现了引用图片的地址不是在本地上的,而是后面跟了一大串字符data:image/png;base64...查了一下资料分析如下: 关于用base64存储图片 网页上有些图片的 ...
- JS input file 转base64 JS图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Git 使用及原理 总结
1. $git diff origin/master master (show me the changes between the remote master branch and my mast ...
- asp.net 页面url重写
不更改情况下,页面路径为index.aspx?id=1,现在输入页面路径index/1时,也能访问到页面,这一过程叫做url重写 ①:在一个类里制定路径重写规则,以下为自定义UrlRewriterFi ...
- 【MVC】关于Action返回结果类型的事儿（上）
一. ASP.NET MVC 1.0 Result 几何? Action的返回值类型到底有几个?咱们来数数看. ASP.NET MVC 1.0 目前一共提供了以下十几种Action返回结果类型: 1. ...
- Easyui扩展或者重载（方法和属性）
1: 使用$.fn.datagrid.defaults.editors重载默认值. 每个编辑器都有以下方法: 名称 属性 描述 init container, options 初始化编辑器并返回目标对 ...
- Python之路【第六篇】：socket
Python之路[第六篇]:socket Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字&quo ...
- HTML5 CSS3简要教程
Web 设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和& ...
- OpenStack实战（一）
OpenStack作为当前发展势头迅猛的云计算开源项目,去年进行了一些了解,现在有空回来进行一些补充记录,当时实战的版本是那会最新版本,当然现在已经更新了好几版了,不过还是那句话“这些丝毫不影响,了解 ...
- 2014年第五届蓝桥杯试题C/C++程序设计B组——李白打酒
题目描述: 标题:李白打酒 话说大诗人李白,一生好饮.幸好他从不开车. 一天,他提着酒壶,从家里出来,酒壶中有酒2斗.他边走边唱: 无事街上走,提壶去打酒. 逢店加一倍,遇花喝一斗. 这一路上,他一共 ...
- C#winform初试报表
步骤1.新建一个窗口,拖一个ReportViewer控件上去,设置该控件的Dock为Fill. 步骤2.添加一个报表文件,如:Report1.rdlc,设置其中的参数,这里设置的参数和下面的代码里面的 ...
- [leetcode]_Symmetric Tree
第二道树的题目,依旧不会做,谷歌经验. 题目解释: give you a tree , judge if it is a symmetric tree. 思路:我以为要写个中序遍历(进阶学习非递归算法 ...