HHuploadify 变化多端的图片上传组件

否子戈

你可以在这里读到我第一次发布HHuploadify的内容,那个时候HHuploadify只是作为一个jquery插件发布,但是现在不同了我希望把它独立出来,不依赖jquery,虽然在浏览器的兼容性上不再支持IE8及以下(之前应该也不支持,没测试过),但是因为不依赖jquery所以在可扩展性上就更进了一步。

升级的目标是让它的使用和配置更加简洁。之前必须按jquery的插件的方式去使用,而现在只需要实例化一个类即可。

<link rel="stylesheet" href="dist/HHuploadify.css">
<script src="dist/HHuploadify.js"></script>
<script>
let uploader = new HHuploadify({
  container: '#upload',
  url: 'http://localhost/uploadImage',
})
</script>

有没有一种超级简单的感觉。来看看升级后的效果:

图片描述
最初级的配置,选择图片(多选)后点击上传按钮进行上传

图片描述
添加一个auto的配置,选择图片(多选)之后自动上传图片

图片描述
默认情况下,点击选择图片按钮后,打开的选择器可以一次性选择多张图片。如果是用户头像,那么只能选一张图片,只需要配置一个single选项即可。配置之后,这个实例只能上传一张图片。开始上传之后,选择按钮就会消失。

图片描述
上传成功之后,用server端返回的url字段中的url作为新的预览图片。在一些需要裁剪的情况下可能会用到,只需要把showPreview设置为2即可。

图片描述
通过showUploadProcess的配置,采用不同的上传进度展示效果。

图片描述
假如你想默认就有几张图片,也是可以的,使用reset方法即可。

图片描述
对HHuplodify进行扩展也超级简单,上图演示的就是利用jquery.dragsort插件扩展HHuploadify,对上传之后的图片列表可以拖拽的效果。

图片描述
利用single选项,进行简单扩展之后,就可以实现一组固定的上传。

图片描述
通过钩子函数,对上传的最大张数进行控制。上面图片演示中,最多只能上传4张图片。

通过这些演示,有没有觉得想要实现自己的上传效果很方便呢?通过github了解怎么安装和使用吧。

如果你觉得组件还不错,打个赏呀~
图片描述

阅读 2.3k

Web烤猫
从简入难,我的Web开发学习心得~

疯狂前端开发中……

2.2k 声望
143 粉丝
0 条评论

疯狂前端开发中……

2.2k 声望
143 粉丝
文章目录
宣传栏