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

若是你以为组件还不错，打个赏呀~