<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. CSS3之弹性布局

    flexbox是CSS3提出的页面布局模块.flexbox可以把列表横向或者纵向排列,并且填满可以延伸到的空间.稍微复杂的布局可以通过嵌套flex container来实现. 利用flexbox可以方 ...

  2. ibatis 改下数据库连接

             <!--<dataSource name="iBatisNet" connectionString="data source= DESKTO ...

  3. README.md

    #gzq-h5app 本项目依赖于nodejs,请尽量安装最新版本. 需要先将Grunt命令行(CLI)安装到全局环境中.安装时可能需要使用sudo(针对OSX.*nix.BSD等系统中)权限或者作为 ...

  4. ORA-12518 TNS:监听程序无法分发客户机连接 解决办法

    查询的脚本: select count(*) from v$process; --取得数据库目前的进程数. select value from v$parameter where name = 'pr ...

  5. py2.7+pyqt4开发端口检测工具

    使用工具:python2.7,pyqt4,pyinstaller,pywin32 先贴代码 import sys from PyQt4 import QtGui,QtCore import threa ...

  6. 2搭建Android开发环境

    这一章主要是讲解如何搭建Android开发环境,需要准备的工具有: (1)   JDK6或以上的版本: (2)   Eclipse (3)   ADT(用于开发Android应用程序) (4)   C ...

  7. Mysql的ssl主从复制+半同步主从复制

    Mysql的ssl主从复制+半同步主从复制 准备工作 1.主从服务器时间同步 [root@localhost ~]# crontab -e */30 * * * * /usr/sbin/ntpdate ...

  8. 搭建高性能计算环境（九）、应用软件的安装之gaussian 09

    高斯软件一般使用的都是编译好的二进制版,所以解压缩后设置一下环境变量就可以用了. cd /opt tar xvf g09.tar.gz 设置环境变量,添加到/etc/profile文件中,重新登录后生 ...

  9. AddToDate

    AddToDate is a PeopleCode built-in function for manipulating a date in PeopleCode. You can use it to ...

  10. IIS安装错误导致网站访问不了

    如下图,网站正常但就是访问不了,原因是IIS配置不正确,把ASP.NET4.5等相关勾选上就可以了,不要用默认的勾选,要自己手动勾选.