Data Url生成工具之HTML5 FileReader实现(图片转编码直接显示,不需经过服务器)

今天用HTML5 FileReader实现了一下Data Url生成工具,上代码吧:


[html] view plaincopy

  1. <!DOCTYPE html   

  2. <html xmlns="http://www.w3.org/1999/xhtml" >  

  3. <head>  

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

  5. <title>如何用HTML5的FileReader生成Data Url</title>  

  6. <meta name="keywords" content="Data Url,HTML5,FileReader"/>  

  7. <meta name="description" content="如何用HTML5的FileReader生成Data Url"/>  

  8. <script type="text/javascript">  

  9.   

  10. function buildDataUrl(source) {  

  11.     var file = source.files[0];  

  12.     if(window.FileReader) {  

  13.         var fr = new FileReader();  

  14.         fr.onloadend = function(e) {  

  15.             document.getElementById("txtBase64").value = e.target.result;  

  16.             document.getElementById("imgView").src = e.target.result;  

  17.         };  

  18.         fr.readAsDataURL(file);  

  19.     }  

  20. }  

  21. </script>  

  22. </head>  

  23.   

  24. <body>  

  25. <p>如何用HTML5的FileReader生成Data Url</p>  

  26. <input type="file" value="" onchange="buildDataUrl(this)" style="border:1px solid #808080; width:300px;" /><br />  

  27. <textarea id="txtBase64" cols="50" rows="20"></textarea>  

  28. <img id="imgView" src="" style="width:300px;" />  

  29. </body>  

  30. </html>  

最终效果图:

你可能感兴趣的:(Data Url生成工具之HTML5 FileReader实现(图片转编码直接显示,不需经过服务器))