图片预览新特性 h5 FileReader

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

图片预览新特性  h5  FileReader

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
         <input type="file" name="file" id="file"></br>
          <div id="picBox"></div>
          
    </body>
    </html>
    
    
    <script type="text/javascript">
        $(document).ready(function(){
         var  file=document.getElementById('file');
               var  picBox=document.getElementById('picBox');
               file.onchange=function(){
                       var fileval=file.files[0];
                       var filereader=new FileReader();
                       filereader.readAsDataURL(fileval);
                       filereader.onload=function(){
                           var othis=this;
                            $("#picBox").append('<img src='+othis.result+' width="300" height="530" id="img"/>');
                       }
               }
    });
             
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

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

相关阅读

相关 H5新特性

. 绘画canvas 2. 媒介回放video和audio 3. 本地存储 localStoreage ,sessionStorage > 请描述一下 cooki...

梦里梦外;/ 2024年04月17日 19:15/ 0 赞/ 70 阅读

相关 WebAPI接口FileReader实现预览图片

【传送门】[https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader][https_developer.mozil

比眉伴天荒/ 2023年07月11日 12:48/ 0 赞/ 10 阅读

相关 uniapp H5文件预览，PDF预览

1.下载[点击跳转下载][Link 1] ![20210413113554991.png][] 2.解压，拷贝 hybrid 目录到你的项目目录下 ![202104131

怼烎@/ 2022年11月18日 13:36/ 0 赞/ 681 阅读

相关 Flink 1.14 新特性预览

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

港控/mmm°/ 2022年09月10日 10:26/ 0 赞/ 210 阅读

相关 H5新特性

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

蔚落/ 2022年07月11日 19:59/ 0 赞/ 231 阅读

相关 H5利用FileReader上传图片

1. Html部分 <h2>文件上传演练</h2> <div id="result">

比眉伴天荒/ 2022年07月11日 09:22/ 0 赞/ 278 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 498 阅读

相关图片预览新特性 h5 FileReader

图片预览新特性 h5 FileReader <!DOCTYPE html> <html lang="en"> <head> <meta

红太狼/ 2022年05月12日 01:58/ 0 赞/ 326 阅读

相关 H5调用微信图片显示预览

// 首选你要开心的引入下js <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></sc

深藏阁楼爱情的钟/ 2022年05月11日 06:18/ 0 赞/ 561 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 707 阅读