用HTML5的FileReader生成Data Url

mww8 9年前發布 | 3K 次閱讀 JavaScript HTML5 

      <!DOCTYPE html

            <html xmlns="http://www.w3.org/1999/xhtml&quot; >

            <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>  </pre>
 本文由用戶 mww8 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！