<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. 再看.net本质

    1.[资源的地址-通用资源标识符] 我们在地址栏中输入的内容称为通用资源标识符(Universal Resource Identifier,URI),它有很多种形式,在Web中我们通常使用称为统一资源 ...

  2. java基础回顾(一)—— sleep和wait的区别

    sleep是Thread类的一个方法,wait是Object类的一个方法 sleep是线程被调用时,占着cpu去睡觉,其他线程不能占用cpu,os认为该线程正在工作,不会让出系统资源 wait是进入等 ...

  3. 雷兽的数据库CAP乱谈之（一）阐述

    今天有人问我cap,找了https://my.oschina.net/lilw/blog/169776这片文字, 下面是cap那篇文字的解释: 所谓CAP理论,即: Cosistency       ...

  4. IIS7下,flush无效,解决方案

    打开文件 C:\Windows\System32\inetsrv\config\applicationHost.config ,注意如果你的是64位系统,这个文件就必须用64位的编辑软件打开,32位的 ...

  5. 【MVC】 文件及URL 的整理

    我们平时在做Asp.Net MVC(以下就简称mvc)项目的时候,页面文件结构都用了"/Views/Controllers/page.aspx",而把一些PartialView呢放 ...

  6. jQuery Ajax 全解析(转)

    <!-- .ajax div{ border: solid 1px red; } --> // <![CDATA[ $(function(){ $("#btnajax&qu ...

  7. 关于hbase的read操作的深入研究 region到storefile过程

    这里面说的read既包括get,也包括scan,实际底层来看这两个操作也是一样的.我们将要讨论的是,当我们从一张表读取数据的时候hbase到底是怎么处理的.分二种情况来看,第一种就是表刚创建,所有pu ...

  8. javaSE第二十一天

    第二十一天    276 1:字符流(掌握)    276 (1)字节流操作中文数据不是特别的方便,所以就出现了转换流.    276 (2)转换流其实是一个字符流    276 1:InputStr ...

  9. 下载uboot的调试版本到开发板的sdram中运行

    开发环境:开发板:FriendlyARM Tiny6410 主机:CentOS release 6.4 (Final) 开发板与主机通过串口线连接 调试用的uboot源码为开发板光盘提供的u-boot ...

  10. 如何循序渐进地学习Javascript

    javascript入门太容易了,导致几乎人人随便看看就能上手,零基础的人学个三五天都能对外宣称自己掌握了js.可是真正掌握js是一件很难的事情.如果在初学一门语言的时候第一想到的是问别人,是很难取得 ...