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

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

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



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


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


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


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


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


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


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


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


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


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

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

如果你觉得组件还不错,打个赏呀~
HHuploadify 变化多端的图片上传组件_第1张图片

你可能感兴趣的:(html5,javascript)