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了解怎么安装和使用吧。

如果你觉得组件还不错，打个赏呀~