你的位置:首页 > 软件开发 > 网页设计 > HTML5——Data Url生成

HTML5——Data Url生成

发布时间:2015-08-11 19:00:18
HTML5——Data Url生成 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" ...

HTML5——Data Url生成

HTML5——Data Url生成

 

 1 <!DOCTYPE html> 2 <html> 3  4   <head> 5     <meta charset="utf-8" /> 6     <title>如何用HTML5的FileReader生成Data Url</title> 7  8     <script type="text/javascript"> 9       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='/images/loading.gif' data-original="" style="width:400px;height: 400px;" />29   </body>30 31 </html>

原标题:HTML5——Data Url生成

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。