在前一个公司封装了一个小小的管理系统平台的GiGiForm。用在了两个小的PC端系统上,这篇文章我将图片(头像)批量上传功能单独提出来说说,又是那句话,又给自己做总结了。其实我只是想在以后的开发工作中再次遇到同样的需求的时候 ,复制,粘贴。完美。。。
该模块实现的主要功能有:
- 图片单张或多张选择;
- 支持图片预览,切换,删除;
- 预览时支持鼠标滚轮缩放图片,图片拖动
- 可以限制图片数量
- 单张图片有大小限制
- 拖动图片到指定区域上传
- 单张图片上传裁剪
共有3个页面
第一个uploadimg.html它长这样,主要的就是图片批量上传,不可拖动
第二个uploadimgbydrag.html,它长这样,可批量选择图片和批量拖动图片
第三个 uploadimgcrop.html 它长这样,实现上传单张图片并裁剪,适合头像或封面图片的制作。需要引入jquery和jcrop两个依赖包