1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>简单的html5 File测试 for pic2base64</title>
  5.     <style>
  6.     </style>
  7.     <script>
  8.         window.onload = function(){
  9.             var input = document.getElementById("demo_input");
  10.             var result= document.getElementById("result");
  11.             var img_area = document.getElementById("img_area");
  12.             if ( typeof(FileReader) === 'undefined' ){
  13.                 result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
  14.                 input.setAttribute( 'disabled','disabled' );
  15.             } else {
  16.                 input.addEventListener( 'change',readFile,false );}
  17.         }
  18.         function readFile(){
  19.             var file = this.files[0];
  20.             //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
  21. //            if(!/image\/\w+/.test(file.type)){
  22. //                alert("请确保文件为图像类型");
  23. //                return false;
  24. //            }
  25.  
  26.             var reader = new FileReader();
  27.             reader.readAsDataURL(file);
  28.             reader.onload = function(e){
  29.                 //result.innerHTML = '<img src="'+this.result+'" alt=""/>';
  30.                 result.innerHTML = this.result;
  31.                 //img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
  32.                 img_area.innerHTML = '<img src="'+this.result+'" alt=""/>'
  33.             }
  34.         }
  35.     </script>
  36. </head>
  37.  
  38. <body>
  39. <input type="file" value="fenjin" id="demo_input" />
  40. <textarea id="result" rows=30 cols=300></textarea>
  41. <p id="img_area"></p>
  42. </body>
  43. </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. 在shell中通过fifo与服务器交互

    首先,需要说的是:1.在shell中,运行的每一个命令至少启动一个新进程,且:$$:获取当前shell的进程号(PID)$! :执行上一个指令的PID2.重定向与管道有点类似,例子:cmd1 < ...

  2. android + javascript 相互通信实例分析

    1.  AndroidManifest.xml中必须使用许可 "android.permission.INTERNET", 否则会出Web page not available错误 ...

  3. def

    a = 97,A = 65,z = 122,Z = 90 小写字母比大写字母整形数值高,upper->lower相差32 把小写字母转化成大写字母,将小写字母 - 32 1. typedef 数 ...

  4. 【MySQL】mysql buffer pool结构分析

    转自:http://blog.csdn.net/wyzxg/article/details/7700394 MySQL官网配置说明地址:http://dev.mysql.com/doc/refman/ ...

  5. Belkasoft Evidence Center could handle Chinese characters well

    I've been using Belkasoft Evidence Center for a very long time. It could handle Chinese characters w ...

  6. VirtualBox是什么

    VirtualBox 是一款 x86 虚拟机软件.原由德国innotek公司开发,2008年Sun收购了Innotek,而Sun于2010年被Oracle收购,2010年1月21日改 名成 Oracl ...

  7. Android自定义样式

    1.AndroidManifest.xml android:theme="@style/Theme.CustomDialog 样式要用:@style <?xml version=&qu ...

  8. 重装linux后

    root帐号解禁vi /etc/pam.d/gdmvi /etc/pam.d/gdm-passwd 两个装机必备软件源http://download1.rpmfusion.org/nonfree/fe ...

  9. javaSE第五天

    第五天    22 1. 方法(掌握)    22 (1)方法:就是完成特定功能的代码块.    22 (2)格式:    22 (3)两个明确:    23 (4)方法调用    23 (5)案例: ...

  10. wpf依赖属性、绑定实现原理、附加属性学习

    依赖属性和普通属性相比节省内存的原因:对于普通属性,每个对象有需要存储一个普通属性的值,即便是默认值.而依赖属性的默认值是静态的存储在类中的,所有对象都使用同一默认值,所以对于拥有大量属性的控件来说这 ...