用HTML5的FileReader生成Data Url

      <!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>
热门搜索

用HTML5的FileReader生成Data Url
