图片上传预览

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

 

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

    效果图演示:

    

 



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

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

 

    

 

  

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

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

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

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

 

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

目录
相关文章
|
前端开发 JavaScript
uniapp上传图片至服务器,获得在线图片链接预览(实战)
uniapp上传图片至服务器,获得在线图片链接预览(实战)
439 0
|
Android开发
安卓图片预览实现
安卓图片预览实现
52 0
|
移动开发 JSON 前端开发
前端H5选图预览到上传
在金融性质的App里,选择本地相册图片或者拍照,然后预览并且上传是一个典型的使用场景,比如常见的身份证信息上传。在最近接触的几家银行客户里,都反馈有类似的场景,并且在使用上都或多或少的遇到一些问题,最后找到我们,希望我们提供一些最佳实践。在这里分享下对应场景的一些优化解决方案。
402 0
前端H5选图预览到上传
|
存储 NoSQL 前端开发
一文搞定图片选择及图片上传
本篇介绍了在 Flutter 中如何选择图片文件,图片选择组件的封装和如何将图片上传到后台。通过本篇,可以了解Flutter 构建应用时的图片上传过程。
953 0
|
JavaScript
预览本地图片原生js
预览本地图片原生js
|
前端开发 JavaScript HTML5
使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览。  在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。
1911 0
|
API
微信小程序之图片选择、预览与上传
所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升。
2325 0