<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实现)的更多相关文章

  1. 使用HTML5的File实现base64和图片的互转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. bolb与base64的图片互转

    直接看图简单明了. 注:便于测试你可以自己用base64图片测试互转一下.这里base64图片太长了就不给予展示了,望理解

  3. base64和图片互转

    pom.xml添加 <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec --> <dependen ...

  4. 字节组数（二进制流）、Base64、图片（文件）、二进制相互之间转换

    using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; ...

  5. 页面以base64输出图片

    <% //读取文件路径,输出base64 编码 System.IO.FileStream stream = System.IO.File.OpenRead(ViewBag.FilePath); ...

  6. base64和图片的转换

    /// <summary> /// base64转图片 /// </summary> /// <param name="strBase64">& ...

  7. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  8. 通过data:image/png;base64把图片直接写在src里

    从网上下了个源文件查看时候发现了引用图片的地址不是在本地上的,而是后面跟了一大串字符data:image/png;base64...查了一下资料分析如下: 关于用base64存储图片 网页上有些图片的 ...

  9. JS input file 转base64 JS图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Tomcat Connector三种运行模式

    BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomcat7或以下,在Linux系统中默认使用这种方式. NIO: 利用Java的异步IO处理,可以通过少量的线程处理大量的 ...

  2. angular.foreach 循环方法使用指南

    angular有自己的生命周期.循环给一个 angular监听的变量复值时.最好还是用angular自带的循环方法.“angular.foreach” },{a:}]; angular.forEach ...

  3. java 设计模式-代理

    代理模式对其他对象提供一种代理以控制对这个对象的访问.      在某些情况下,一个对象不想或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用.       代理模式的思想 ...

  4. 盒子的padding不影响总的大小css代码

    -moz-box-sizing: border-box; /*Firefox3.5+*/-webkit-box-sizing: border-box; /*Safari3.2+*/-o-box-siz ...

  5. 第1部分: 游戏引擎介绍， 渲染和构造3D世界

    原文作者:Jake Simpson译者: 向海Email:GameWorldChina@myway.com ---------------------------------------------- ...

  6. POJ C程序设计进阶 编程题＃1：计算矩阵边缘之和

    编程题#1:计算矩阵边缘元素之和 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB ...

  7. redis的数据类型

    redis有string,hash,list,sets.zsets几种数据类型 1.string数据类型 可包含任何数据,是二进制安全的,比如图片或者序列化的对象set key valueset na ...

  8. 【Apache】2.4.6版本的安装和配置

  9. phpcms 的实用相关接口，函数，调用方法

    常用函数 , 打开include/global.func.php,下面存放一些公共函数view plaincopy to clipboardprint? strip_tags() 调用内容过滤html ...

  10. LinkedList存储一副扑克牌，实现洗牌功能。

    package cd.itcast.runble; import java.util.LinkedList; import java.util.Random; /** * LinkedList存储一副 ...