您现在的位置是:首页 > 学无止境> 程序人生网站首页慢生活

多个单图进行预览

张帅2019-11-01 704人围观
简介 用最简单的代码,实现瀑布流布局,没有繁琐的css,没有jq,只需要做到以下就可以实现瀑布流的效果。思路很简单,看成是三列布局,分别用三个ul来调用。帝国cms列表模板,...
多个独立的图片上传,进行预览操作:
html:

根据input的onchange改变事件,进行预览图片:
<div class="cardImgId">
   <input type="file" id="imageUrl03" onchange="showImg('imageUrl03','photoImg03')" required lay-verify="required" class="cardImg"/>  
   <img src="images/yulan.png" id="photoImg03" alt=""/>   //图片预览的位置
</div>
js:
<script>
   function showImg(fileid,target){   //给2个参数,其他位置的参数名一致,值就进去了
       var preview = document.querySelector('#'+target);   //获取img元素,显示图片位置,根据el表达式('#'+target)
       var file = document.querySelector('#'+fileid).files[0];   //根据id拿到文件选择框里面的文件,
       var reader = new FileReader();   //创建FileReader接口(把文件放到图片预览框里面)
       reader.onloadend = function () {
           preview.src = reader.result;
       }
       if (file) {
           reader.readAsDataURL(file);
       } else {
           preview.src = "";
       }
   }
</script>

预览效果如图:


文章评论

    已有 5 条评论

    TheBaiRuo

    你好啊 我的博客

    测试 2019-11-02 10:11:04

    TheBaiRuo

    你好啊小哥哥

    测试 2019-11-02 10:09:12

    TheBaiRuo

    名称:妙笔生花
    简介:一生很长,会遇见很多出现在你生命中的过客!
    网址: https://blog.zh66.club
    LOGO:http://blog.zh66.club/usr/themes/Miracles/favicon.ico

    妙笔生花 2019-11-01 14:44

    TheBaiRuo

    名称:皮皮家园
    简介:要让平凡的每一天,变得不再平凡!
    网址: https://www.zh66.club
    LOGO:https://cdn.jsdelivr.net/gh/Zevs6/CDN@3.0/img/avatar.jpg

    皮皮家园 2019-11-01 20:44

    admin

    小伙伴们快来评论留言吧!

    admin 2019-11-01 11:15

    添加新评论