admin管理员组

文章数量:1655506

最近做了这样的一个功能,在wap网页上实现类似小红书app里的图片标签功能,很是蛋疼。

上传页示例如下图:

可以看到最上面的①是展示区域,也是编辑标签的操作区域;中间②是可滑动的缩略图,在此选择要编辑的图片;最下面③是“添加图片”和“添加标签”两个按钮。

废话不多说,下面介绍具体实现思路。

首先就是要有“选择图片”的按钮。

1

其中的 multiple 属性是一次多选多张图片,但并不是所有浏览器都支持,比如UC,如果不支持就只能多选几次了。

fileSelectHandler()的作用是处理你所选择的图片文件,首先要将图片显示在②的区域,这里的滑动效果是用swiper.js实现的,有兴趣的同学可以百度一下,有中文官网。但是手机拍照动不动就几兆的图片,不利于上传,而且手机浏览器处理时会有明显卡顿,所以需要压缩后再使用。

1 function fileSelectHandler() {2 //...3 //获取文件

4 var oFile = $(\'#image_file\')[0].files;5 for (var j = 0; j < oFile.length; j++) {6 var oReader = newFileReader();7 oReader.readAsDataURL(oFile[j]);8 oReader.onloaden

本文标签: 小红标签功能图片