![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html/css
吕小胖纸
这个作者很懒,什么都没留下…
展开
-
html+css实现自定义图片上传按钮
普通的input[type=‘file’]的效果很朴素可以自定义一个file选择文件的按钮:思路为:用定位将自定义的按钮遮住原来的选择文件按钮,再让点击自定义按钮时触发原来的选择文件按钮的事件即可(对此,label可实现)eg:html:css样式:结果图:点击“选择图片”按钮,则会触发选择图片的事件,你就可以选择图片啦!...原创 2019-01-07 10:49:35 · 22880 阅读 · 52 评论 -
html5-FileReader实现上传图片实时预览
普通的文件上传只能看到它的文件名,而如果要实现选择某一张图片则可以利用html5的FileReader完成下面是实现步骤:html:这里是上传图片的内容,onchange="getFile()"为选择文件后的转换函数,后面会提及上传图片的按钮我这里是自定义的,做法在另一篇博客里css:预览框我暂定为100x100的正方形框,出来后图片可能会有变形之类的,可以自定义接下来是主要的J...原创 2019-01-07 12:32:01 · 387 阅读 · 0 评论 -
html使用ajax实现文件分片上传
在实用中,经常有上传文件的操作,但是上传的文件有时会很大,所以需要将文件分片,然后一片一片上传到后台。其实前端写法跟普通的文件上传没有区别,只是需要把文件切割一下就好了。下面是一个例子:代码结果:js部分:获取文件后就开始分片上传,有两个参数,第一个是文件,第二个是从第几片开始上传,当然是第一片下面是PostFile的JS部分啦:可以看出,其实就是普通的文件上传,只是获取...原创 2019-01-18 19:51:00 · 1842 阅读 · 8 评论 -
CSS3-transform实现鼠标hover的动画特效
先上效果图:我是偷师学来的!介绍一下背景,公司里我所在的那个组的前端组长是个大佬,之前我做的项目因为有其他调动交给他了,然后闲暇时间我就拉了他更改之后的代码看看,毕竟之后总会接手代码的嘛!然后我看页面的时候就发现了这个效果!好奇驱使我查看了他的CSS样式(因为class多了一个),然后就发现了这个。虽然以前觉得我会写animate,也能实现一样的效果,觉得就不用学习谁谁都在吹的transf...原创 2019-08-06 17:47:08 · 1537 阅读 · 0 评论