图片预览新特性 h5 FileReader

红太狼 2022-05-12 01:58 394阅读 0赞

图片预览新特性 h5 FileReader 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  7. </head>
  8. <body>
  9.      <input type="file" name="file" id="file"></br>
  10.       <div id="picBox"></div>
  12. </body>
  13. </html>
  15. <!-- IE9以上的浏览器才可以使用 -->
  16. <script type="text/javascript">
  17.     $(document).ready(function(){
  18.      var  file=document.getElementById('file');
  19.            var  picBox=document.getElementById('picBox');
  20.            file.onchange=function(){
  21.                    var fileval=file.files[0];
  22.                    var filereader=new FileReader();
  23.                    filereader.readAsDataURL(fileval);
  24.                    filereader.onload=function(){
  25.                        var othis=this;
  26.                         $("#picBox").append('<img src='+othis.result+' width="300" height="530" id="img"/>');
  27.                    }
  28.            }
  29. });
  31. </script>

发表评论

表情：
评论列表 （有 0 条评论，394人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Flink 1.14 新特性预览

    简介： 一文了解 Flink 1.14 版本新特性及最新进展 > 本文由社区志愿者陈政羽整理，内容源自阿里巴巴技术专家宋辛童 (五藏) 在 8 月 7 日线上 Flink M

    港控/mmm°港控/mmm°/ 0 赞/ 258 阅读

    相关 H5新特性

    1、用于绘画的canvas标签 2、用于媒介回放的video和audio元素 3、对本地离线储存的更好支持（sessionStorage和localStorage） 4、

    蔚落蔚落/ 0 赞/ 278 阅读