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

bawn 发布于2019-08-20 19:03 / 2837人阅读

摘要：上传成功之后，用端返回的字段中的作为新的预览图片。通过的配置，采用不同的上传进度展示效果。利用选项，进行简单扩展之后，就可以实现一组固定的上传。通过钩子函数，对上传的最大张数进行控制。上面图片演示中，最多只能上传张图片。

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

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

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

最初级的配置，选择图片（多选）后点击上传按钮进行上传

添加一个auto的配置，选择图片（多选）之后自动上传图片

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

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

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

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

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

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

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85079.html

一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

摘要：利用中间件实现异步请求，实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化，项目文章在这里。后来一直没动，前些日子才把后续的完善。欢迎访问我的个人网站：http://www.neroht.com/ 刚学vue和react时，利用业余时间写的关于这两个框架的训练，都相对简单，有的...

tangr206 2019-06-26 17:34 评论0 收藏0
左滑右滑的乐趣

摘要：左滑右滑你不再是一个人无论你是一个程序猿还是一个程序媛，每天干的事除了还是，代码不能解决的问题什么问题自己心里还没点数嘛，探探能帮你解决。左滑右滑你不再是一个人无论你是一个程序猿还是一个程序媛，每天干的事除了coding还是coding，代码不能解决的问题（什么问题自己心里还没点abcd数嘛），探探能帮你解决。最近网上特流行一款交友软件叫探探（据说是yp软件）。作为探探曾经的一...

Muninn 2019-08-29 14:02 评论0 收藏0
实践是检验程序员的唯一标准02：用户不想跟你说话并向你扔出一张图片 - 图片上传组件开发【开发篇】

摘要：温馨提示这里除了一些幼稚的小组件啥也没有写在前面距离写完上一篇实践是检验程序员的唯一标准用户不想跟你说话并向你扔出一张图片图片上传组件开发思路篇过去了大半年，才开始写开发篇真的是令人悲哀，不过有句话说的好，开始做一件事最好的时间是大半年前温馨提示：这里除了一些幼稚的小组件啥也没有写在前面距离写完上一篇实践是检验程序员的唯一标准01：用户不想跟你说话并向你扔出一张图片 - 图片上传...

CocoaChina 2019-08-23 12:26 评论0 收藏0
springmvc 接收上传图片并且存储至本地目录

摘要：图片存储的方式为存储在虚拟目录下并返回虚拟目录的路径。如果是将开发的包直接部署在服务器中，则参考配置虚拟目录。序言：项目环境本次简单的demo是建立在springmvc框架上的，部署环境为tomcat，前段使用的bootstrap+jquery_file_upload组件。图片存储的方式为存储在虚拟目录下并返回虚拟目录的路径。建议先搭配好springmvc环境再继续参考本博客。没有...

SimpleTriangle 2019-08-14 18:37 评论0 收藏0