本文摘自PHP中文网,作者Y2J,侵删。
这篇文章主要介绍了基于HTML5实现多张图片上传功能,在单张图片上传的基础上实现多张图片上传功能,感兴趣的小伙伴们可以参考一下图片上传之前也有写过,不过是单张上传的,最近有个业务需求是需要多张上传的,于是乎从新改写了一下
HTML结构:
XML/HTML Code复制内容到剪贴板
1 2 3 4 |
|
顺便说下这个上传的主要逻辑:
?用input标签并选择type=file,记得带上multiple,不然就只能单选图片了
?绑定好input的change时间,
?重点就是如何处理这个change事件了,使用H5新的FileReader接口读取文件并打成base64编码,之后的事就是与后端同学交互着玩啦
JS代码:
JavaScript Code复制内容到剪贴板
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
上传多张图片难道就这样实现了吗0.0
相关阅读 >>
HTML5开发实例-threejs实现粒子动画飘花效果代码分享
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者