圖片生成database 64

一喵嗚發表於2015-06-20
Database
  <!DOCTYPE html
        <html xmlns="http://www.w3.org/1999/xhtml" >
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>如何用HTML5的FileReader生成Data Url</title>
        <meta name="keywords" content="Data Url,HTML5,FileReader"/>
        <meta name="description" content="如何用HTML5的FileReader生成Data Url"/>
        <script type="text/javascript">
       
        function buildDataUrl(source) {
             var file = source.files[0];
             if(window.FileReader) {
             var fr = new FileReader();
             fr.onloadend = function(e) {
             document.getElementById("txtBase64").value = e.target.result;             document.getElementById("imgView").src = e.target.result;             };
             fr.readAsDataURL(file);             }
        }
        </script>
        </head>
       
        <body>
        <p>如何用HTML5的FileReader生成Data Url</p>
        <input type="file" value="" onchange="buildDataUrl(this)" style="border:1px solid #808080; width:300px;" /><br />
        <textarea id="txtBase64" cols="50" rows="20"></textarea>
        <img id="imgView" src="" style="width:300px;" />
        </body>
</html>




相關文章