<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. NOIP2007 守望者的逃离-DP

    https://vijos.org/p/1431 描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守 ...

  2. 旅行计划-DAG上最长路

    http://www.luogu.org/problem/show?pid=1137 题目描述 小明要去一个国家旅游.这个国家有N个城市,编号为1-N,并且有M条道路连接着,小明准备从其中一个城市出发 ...

  3. dom4j操作xml对象

         // 获取Documen对象      public static Document getDocument(String path) throws Exception{           ...

  4. [JFinal 2] JFinal 开发框架

    导读:在这次和大家一起开发的今日开讲后台管理系统中,我们用的是JFinal框架.开始的时候,说是用SSH,心里一阵窃喜,刚刚做了网上商城的项目,对于这个框架还算是接触过了.JFinal却是个新货,心里 ...

  5. http 301、304状态码

    在利用httpwatch进行抓包分析时,我们经常会看到200.301.304这几个状态码.具本三者是什么意思呢? 200表示正常0k,这个是地球人都知道的了. 301 Moved Permanentl ...

  6. asp.net 在线人数

    很网站都有在线人数,这一功能无处不在.现在,我们就介绍在.NET中一个简单明了的方法来统计在线用户的多少,该方法的特点就是充分的利用了ASP.NET的特点,结合global.asax文件,用Appli ...

  7. C# 多线程传参

    using System; using System.Threading; //多线程调试: 2013.10.08 namespace ThreadExample { class App { publ ...

  8. hdu2067

    如果i==j&&j-1>=0时候,f[i][j]=f[i][j-1]; 如果j==0时候,f[i][j]=1; 其他 f[i][j]=f[i-1][j]+f[i][j-1]; # ...

  9. xdotool-linux下的按键精灵

    这是我在ST写的用来自动打开机顶盒的脚本 #!/bin/bash init_stb() { xdotool type "telnet 10.80.117.$1" xdotool k ...

  10. ADO.NET数据库

    ASP.NET提供了ADO.NET技术,它是ASP.NET应用程序与数据库进行交互的一种技术. ADO.NET技术把对数据库的操作分为几个步骤,并为每个步骤提供对象来封装操作过程,从而使对数据库的操作 ...