[2017.8.29] 我对HHuplo【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。adify进行了一次升级，用的同学还是有【未经授权禁止转载】本文作者：唐霜，转载请注明出处。一些，所以感觉有必要进行继续维护。升级的【本文受版权保护】【版权所有，侵权必究】目的有两个，一是脱离jquery，让它可著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】以单独运行，二是适应module化编程的【原创内容，转载请注明出处】【本文首发于唐霜的博客】趋势，提供es6的源码导出。升级之后，以【转载请注明来源】【版权所有】唐霜 www.tangshuang.net前提供的一些抽象化操作函数去掉了，需要开【作者：唐霜】【版权所有】唐霜 www.tangshuang.net发者自己实现，但是实现起来更加简单，有篇新版文章可以看下里面的演示效果。具体请到github上查看源码了解详情。

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

简介

有一个著名的图片上传插件uploadif【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。y，在这个插件基础上，Huploadif【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。y被开发出来，是由国人开发的，使用起来也【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net比较好用。但是，我 希望对自己的项目进行【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。定制，希望实现像淘宝添加图片那样，点击一本文作者：唐霜，转载请注明出处。原创内容，盗版必究。个上传按钮，然后自己上传，上传的时候，有【本文受版权保护】【本文首发于唐霜的博客】一个进度条，上传完之后，预览图片，于是开【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。发了这个插件。同时，在Huploadif转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】y基础上，还增加了单个图片上传，比如在上【版权所有，侵权必究】原创内容，盗版必究。传头像的时候，不可能让你上传多张图片。因转载请注明出处：www.tangshuang.net原创内容，盗版必究。此，我在Huploadify的基础上进行【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。修改，得到了HHuploadify。

【版权所有，侵权必究】【作者：唐霜】【作者：唐霜】本文作者：唐霜，转载请注明出处。

 

未经授权，禁止复制转载。【本文受版权保护】

先来看看一些演示效果：

【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ang.net著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】et 获取更多精彩内容】转载请注明出处：www.tangshua未经授权，禁止复制转载。原创内容，盗版必究。ng.net

转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ng.net本文作者：唐霜，转载请注明出处。【本文受版权保护】 【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ngnet】原创内容，盗版必究。 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【本文受版权保护】 【未经授权禁止转载】【访问 www.tangshuang.n【本文受版权保护】【本文首发于唐霜的博客】et 获取更多精彩内容】【本文受版权保护】【版权所有】唐霜 www.tangshu原创内容，盗版必究。【原创不易，请尊重版权】ang.net 【作者：唐霜】本文作者：唐霜，转载请注明出处。 转载请注明出处：www.tangshua【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ng.net【本文受版权保护】 【原创内容，转载请注明出处】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ng.net【本文受版权保护】 【原创内容，转载请注明出处】【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【版权所有，侵权必究】 未经授权，禁止复制转载。【转载请注明来源】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

安装和使用

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

转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ng.net【关注微信公众号：wwwtangshua未经授权，禁止复制转载。未经授权，禁止复制转载。ngnet】本文作者：唐霜，转载请注明出处。

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【作者：唐霜】转载请注明出处：www.tangshuang.net就是这个实例了，它包含了所有的metho【本文受版权保护】【版权所有，侵权必究】ds，你可以用它干你想干的事。当然，你也著作权归作者所有，禁止商业用途转载。【转载请注明来源】可以在配置中传入钩子函数来干你想干的事。

转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ng.net【本文受版权保护】【访问 www.tangshuang.n未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】

看下怎么扩展它：

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】et 获取更多精彩内容】

import HHuploadify from 'hhuploadify'
export default class extends HHuploadify {
  myMethod() { // 新方法
    console.log(this.files)
  }
  reset(files) { // 复写的方法
    super.reset(files)
    console.log(files)
  }
}

这样你就扩展出一个新方法，复写了一个原型著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】链方法。是不是非常简单。

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

具体的说明文档在我的github仓库主页有，所以这里就不全部列出来，你可以在那里本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】去认真阅读和了解它的全部功能。

本文作者：唐霜，转载请注明出处。【作者：唐霜】著作权归作者所有，禁止商业用途转载。

下载和仓库

如果你看了网上的一些资料，按照它们提供的著作权归作者所有，禁止商业用途转载。【本文受版权保护】方法来使用，可以下载1.0版本，如果你想给我提bug或者contrib本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ute的话，在github仓库上玩弄吧。

转载请注明出处：www.tangshua【作者：唐霜】【版权所有】唐霜 www.tangshuang.netng.net【原创内容，转载请注明出处】【访问 www.tangshuang.n原创内容，盗版必究。本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】【作者：唐霜】

2016-01-18 17256