<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. Android 之 下拉框(Spinner)的使用

    下拉列表 Spinner. Spinner的使用,可以极大提高用户的体验性.当需要用户选择的时候,可以提供一个下拉列表将所有可选的项列出来.供用户选择. Demo如下,可以留作参考 一.使用数组作为数 ...

  2. [AngularJS 1] Introduction to AngularJS

    introduction:this article is going to introduce AngularJS in generally. I will write it through five ...

  3. 使用扩展方法(this 扩展类型)

    namespace ConsoleApp_UseExtendWays{ class Program { static void Main(string[] args) { Student s = ne ...

  4. android版猜拳游戏源码分享

    android版猜拳游戏源码分享安卓版猜拳游戏源码,该文件中带有安装测试包的,这个游戏源码比较简单的,现在有两个代码,一个自定义VIEW的,一个就是普通的imageView图片,游戏非常适合一些新手的 ...

  5. windows下如何修改远程登录端口

    windows下如何修改远程登录端口 windows远程桌面默认端口为3389,修改 方法如下:在"开始>运行"中输入"regedit" 点击“确定”,打 ...

  6. 如何解除改变phpmyadmin数据库导入文件大小限制？

    1.进到自己的系统里面 打开php.ini的配置文件 修改php.ini: file_uploads     on    是否允许通过HTTP上传文件的开关.默认为ON即是开 upload_tmp_d ...

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

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

  8. CSS中的content和attr的用法

    问题缘起 在闲看别人网站时发现了这样的代码 <span class="hamburger icon" data-icon="C"> .icon:be ...

  9. ThinkPHP之中getlist方法实现数据搜索功能

    自己在ThinkPHP之中的model之中书写getlist方法,其实所谓的搜索功能无非就是数据库查询之中用到的like  %string%,或者其他的 字段名=特定值,这些sql语句拼接在and语句 ...

  10. JQ定义

    什么是jQuery对象 通过$(‘选择器’)获取到都是jQuery对象 什么是DOM对象 通过getElementById或者 getElementsByTagName或者getElementsByN ...