HTML5——Data Url生成

发表于2015-08-14 11:14:55| 1436次阅读| 来源webkfa| 作者html5,css3

摘要：HTML5——Data Url生成 1 2 3 4 5 6 如何用HTML5的FileReader生成Data Url 7 8 21 22 23 24 用HTML5的FileReader生成Data ...

HTML5——Data Url生成

011 <!DOCTYPE html>
02<html>
03 
04    <head>
05        <meta charset="utf-8" />
06        <title>如何用HTML5的FileReader生成Data Url</title>
07 
08        <script type="text/javascript">
09            function imageDataUrl(source) {
10                var file = source.files[0];
11                if (window.FileReader) {
12                    var fr = new FileReader();
13                    fr.onloadend = function(e) {
14                        document.getElementById("txtBase64").value = e.target.result;
15                        document.getElementById("imgView").src = e.target.result;
16                    };
17                    fr.readAsDataURL(file);
18                }
19            }
20        </script>
21    </head>
22 
23    <body>
24        <p>用HTML5的FileReader生成Data Url</p>
25        <input type="file" onchange="imageDataUrl(this)" style="border:1px solid #808080; width:432px;" />
26        <br />
27        <textarea id="txtBase64" cols="50" rows="20"></textarea>
28        <img id="imgView" src="" style="width:400px;height: 400px;" />
29    </body>
30 
31</html>

HTML5——Data Url生成

发表于2015-08-14 11:14:55| 1436次阅读| 来源webkfa| 作者html5,css3

相关文章

最新发布

阅读排行

热门文章

猜你喜欢