HHuploadify是一个纯粹的图片上本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】传组件，说纯粹是因为只考虑把它用来上传图【作者：唐霜】本文版权归作者所有，未经授权不得转载。片。当然，上传文件也是没问题的，但是文件著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。上传的UI应该和图片上传的UI有较大的区著作权归作者所有，禁止商业用途转载。【本文受版权保护】别，而且文件上传也不存在preview的著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】问题。

为什么要升级？著作权归作者所有，禁止商业用途转载。

HHuploadify最初的版本是我在H本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】uploadify这个jquery插件的【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。基础上开发的，UI改了，上传的时候支持的【转载请注明来源】未经授权，禁止复制转载。功能多了。在发布后的几年里，不断有人问我原创内容，盗版必究。【转载请注明来源】xxx可不可以，我的大部分回答，都是要自【转载请注明来源】【原创内容，转载请注明出处】己写代码实现。这几天因为公司产品rele转载请注明出处：www.tangshuang.net【本文受版权保护】ase之后相对有点闲了，就打算重写一遍H【原创内容，转载请注明出处】【未经授权禁止转载】Huploadify。

大概花了两天的时间，重构过程还算顺利，最本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】开始想支持IE8，但最后因为iframe本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。提交时报dined错，就只能放弃了。现在【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。插件能支持到IE9（IE9也有一点坑，但【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】是大部分情况下还过得去）。而且，最重要一【转载请注明来源】【本文首发于唐霜的博客】点，它不依赖jquery了。它是一个独立未经授权，禁止复制转载。原创内容，盗版必究。的组件，而且我发布到npm了。我这两年都未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net在用webpack babel等构建工具【原创内容，转载请注明出处】【本文首发于唐霜的博客】，所以依赖感比较强，写ES6也很随意，所原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】以源码都是ES6写的，ES6归ES6，但【转载请注明来源】【版权所有】唐霜 www.tangshuang.net是有些api要考虑IE9，所以还是没敢太未经授权，禁止复制转载。【原创内容，转载请注明出处】大胆用，比如还是在用for…【本文受版权保护】【原创内容，转载请注明出处】in。但是，我已经习惯了直接import本文作者：唐霜，转载请注明出处。【未经授权禁止转载】, export这样的语法，所以，当我想本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】重新用HHuploadify的时候，发现著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】不好用，它只是一个jquery插件。这就原创内容，盗版必究。本文作者：唐霜，转载请注明出处。催生我重写一遍它。对于那些还在用或者准备著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。要用的同学们，我可能要很遗憾的说，你想要【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。实现的都可以实现，但是你要写的代码可能更【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。多了。之所以这样，是因为我之前封装了几个转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。函数，现在把它们去掉了，整个组件的核心都未经授权，禁止复制转载。【本文首发于唐霜的博客】在这里，只需要通过class exten【原创内容，转载请注明出处】【作者：唐霜】ds或者钩子函数就可以非常好的进行扩展。

看看DEMO【作者：唐霜】

所以，它现在变得很风骚，不信你可以先看看【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】效果：

最初级的配置，选择图片（多选）后点击上传【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。按钮进行上传

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

添加一个auto的配置，选择图片（多选）原创内容，盗版必究。【本文受版权保护】之后自动上传图片

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】

默认情况下，点击选择图片按钮后，打开的选著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net择器可以一次性选择多张图片。如果是用户头未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。像，那么只能选一张图片，只需要配置一个s【版权所有，侵权必究】【原创不易，请尊重版权】ingle选项即可。配置之后，这个实例只【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。能上传一张图片。开始上传之后，选择按钮就本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。会消失。

【作者：唐霜】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

上传成功之后，用server端返回的ur【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。l字段中的url作为新的预览图片。在一些本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】需要裁剪的情况下可能会用到，只需要把sh著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】owPreview设置为2即可。

【本文受版权保护】【作者：唐霜】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。

通过showUploadProcess的转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】配置，采用不同的上传进度展示效果。

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【版权所有，侵权必究】

假如你想默认就有几张图片，也是可以的，使【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。用reset方法即可。

【本文受版权保护】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

对HHuplodify进行扩展也超级简单转载请注明出处：www.tangshuang.net【作者：唐霜】，上图演示的就是利用jquery.dra【转载请注明来源】【原创不易，请尊重版权】gsort插件扩展HHuploadify【作者：唐霜】【版权所有】唐霜 www.tangshuang.net，对上传之后的图片列表可以拖拽的效果。

【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【作者：唐霜】

利用single选项，进行简单扩展之后，【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。就可以实现一组固定的上传。

【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

通过钩子函数，对上传的最大张数进行控制。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net上面图片演示中，最多只能上传4张图片。

原创内容，盗版必究。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

这些场景应该很多都会覆盖你的上传的情况吧本文版权归作者所有，未经授权不得转载。【转载请注明来源】。当然，你有特殊的需求，没关系，只需要e著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。xtends class或者在钩子函数中原创内容，盗版必究。未经授权，禁止复制转载。写逻辑即可。可配性强的同事，接口还是完全著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net暴露可复写的。

安装和使用【版权所有】唐霜 www.tangshuang.net

你可以直接像以前一样在浏览器中直接引用，本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。但是你也可以像module一样impor转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nett到你的项目中，我已经发布了npm包，所本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】以你可以这样干：

npm i -S hhuploadify

import 'hhuploadify/dist/HHuploadify.css' // 在webpack中可以直接使用css了import HHuploadify from 'hhuploadify'

let uploader = new HHuploadify({

  container: '#upload',

  url: 'http://localhost/upload',})

然后，在那个#upload的容器中就会有【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net一个上传的UI效果出来。uploader原创内容，盗版必究。【原创不易，请尊重版权】就是这个实例了，它包含了所有的metho著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ds，你可以用它干你想干的事。当然，你也【转载请注明来源】【版权所有】唐霜 www.tangshuang.net可以在配置中传入钩子函数来干你想干的事。

看下怎么扩展它：【转载请注明来源】

import HHuploadify from 'hhuploadify'

export default class extends HHuploadify {

  myMethod() { // 新方法

  

  console.log(this.files)

  }

  reset(files) { // 复写的方法

  

  super.reset(files)

  

  console.log(files)

  }}

这样你就扩展出一个新方法，复写了一个原型原创内容，盗版必究。转载请注明出处：www.tangshuang.net链方法。是不是非常简单。

下载和仓库【转载请注明来源】

如果你看了网上的一些资料，按照它们提供的【版权所有】唐霜 www.tangshuang.net【作者：唐霜】方法来使用，可以下载1.0版本【本文首发于唐霜的博客】，如果你想给我提bug或者contrib转载请注明出处：www.tangshuang.net【未经授权禁止转载】ute的话，在github仓库著作权归作者所有，禁止商业用途转载。上玩弄吧。原创内容，盗版必究。