开发者社区> sunshine.pl> 正文

图片上传预览

简介:      最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。
+关注继续查看

 

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

    效果图演示:

    

 



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

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

 

    

 

  

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

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

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

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

 

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
图片上传预览
     最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。
682 0
鼠标划过时,预览大图片(浮动层)
当鼠标划过图片时,用浮动层来预览大图片,虽然不算完美,但够一个网站用即可,有需要再拿来改。 无标题文档 .center_div2{ position: absolute; z-index: 1; text-alig...
662 0
使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码
 1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例: 3.编写的html代码如下: <div id="light" class="white_content">        &lt
2362 0
实现图片预览效果及模糊效果
一、图片的预览效果 本次实现是在vue-cli中实现的路由来实现图片的预览效果 第一步定义两个组件命名为HelloWorld.vue和Layer.vue 第二步需要配置两个组件的前端路由 代码如下: 第三步在HelloWorld的组件中...
915 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18118 0
手把手教你用 Vue 搭建带预览的「上传图片」管理后台
手把手教你开发带预览的 Vue 图片上传组件,即图片上传管理后台。只要你跟本教程一步一步走,最终能很好的理解整个前后端传图的工程逻辑。前端我们使用 Vue + Axios + Multipart 来搭建前端上传图片应用,后端我们使用 Node.js + Express + Multer 来搭建后端上传图片的后端处理。
37 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24852 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19870 0
.net 图片上传
  ///       /// asp.net上传图片并生成缩略图      ///       /// HtmlInputFile控件      /// 保存的路径,些为相对服务器路径的下的文件夹      /// 缩略图的thumb      //...
807 0
+关注
sunshine.pl
我是默卿,是一个可爱的蓝孩子,半个ACG爱好者,生活在1.5次元,后端小萌新,喜欢各种有趣的事物。
77
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载