<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. java基础回顾(四)——锁机制

    关键字Synchronized 1.对于同步的方法或者代码块来说,必须获得对象锁才能够进入同步方法或者代码块进行操作: 2.如果采用method级别的同步,则对象锁即为method所在的实例对象,如果 ...

  2. json 對象的序列化

    var a={x:1,y:2} s=JSON.stringify(a); //s="{"x":1,"y":2}" p=JSON.parse( ...

  3. 【Linux】Centos部署MySQL

    将CentOS部署MySQL需要本地配置环境.本地编译MySQL,耗时较长的情况,优化为编译成型MySQL并打包,推送并按配置部署. 首先需要在一台机器配置好环境,搭个YUM源,并将所需要的包取出备用 ...

  4. Linux 下多核CPU知识

    1. 在Linux下,如何确认是多核或多CPU: #cat /proc/cpuinfo 如果有多个类似以下的项目,则为多核或多CPU: processor  : 0 ...... processor  ...

  5. LiveView 0.8 RC1 could boot evidence files acquired from Win10 64bit

    The latest Windows 10 will be more and more popular in the very near future. Now let's take a look i ...

  6. SAS 5/iR Adapter 驱动下载

    http://www.dell.com/support/home/cn/zh/cnbsd1/Drivers/DriversDetails?driverId=FF6F6

  7. Windows server 2008 R2远程桌面终端连接数的破解

    Windows server 2008 R2远程桌面终端连接数的破解 日常工作中,经常需要远程连接到服务器上,然而在公司里,老总.同事都需要连接到服务器上,而默认的服务器系统同时连接的最大连接数只有2 ...

  8. SQL笔记-第一章，数据库入门

    DBMS的分类DB2.Oracle.Microsoft SQL Server.Sybase SQLServer.Informix.MySQL数据库的结构元素库 database表 table列 col ...

  9. php的命名规范

    1.类 类名每一个单词首字母大写,如类名StudentCourse. 2.常量 常量名所有字母大写,单词间用下划线分隔,如常量名NULL.TRUE.FALSE.ROOT_PATH等. 3.变量 为了保 ...

  10. JavaScript高级 Function类型

    ·    Function类型 (属于引用类型) 1.JS中,有的函数均是对象,这个一个非常有特点的地方.它既然是对象,那么它的构造函数是谁呢?就是Function.(例如:function Pers ...