• 图片上传预览


     

         最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。虽然功能很简单,但是里面还是有些小的逻辑的,刚写的时候没少折腾,所以弄了个demo总结一下。

        效果图演示:

        



        最多允许上传4张,每次上传的时候都会动态的计算当前上传的数量,每次删除的时候数量也会重新计算。         

        当然了,文件格式以及大小的校验也是有的,GIF里没演示出来,当时只是做了文件大小和格式的console.log输出,后来在源码里补上了。浏览器输出截图如下:

        

      

        图上选择了两张,依次分别输出了文件大小(KB)以及文件类型,根据这个其实就可以做格式校验了~                   

        详见源码, 已发布到Github,如果有用或者帮助到了你希望给个Star!  Thanks~     

               Github源码地址:  https://github.com/lovemoqing/UploadImg  

        转载和分享请著名出处,谢谢。

        打个广告,http://www.lovemoqing.com/  欢迎大家访问我的个人博客并去留言~~

  • 相关阅读:
    CSUOJ 1170 A sample problem
    code forces 979C
    PAT L1 049 天梯赛座位分配
    牛客~~打篮球~~~模拟水题
    牛客~~扫雷~~~DFS+模拟
    模板整理~~~~~大整数模板
    湖南多校对抗赛网络赛第五场
    Educational Codeforces Round 42 (Rated for Div. 2) C
    Educational Codeforces Round 42 (Rated for Div. 2) B
    texture 资源 shader资源
  • 原文地址:https://www.cnblogs.com/sunshine-wy/p/8422902.html
Copyright © 2020-2023  润新知