通常情况下,我们都是借助type="file" 的input 标签来实现文件上传的,然而,它不能很好地与其它表单元素共存。面对这样的问题,可以将文件上传单独做成一个上传接口,通过异步上传的方式,先将图片上传存储,返回相关的文件信息,然后与其它表单一起提交到数据库。
上一篇文章《基于ThinkPHP5+layui框架,实现图片上传以及图片预览》,通过实现EY内容管理系统的文章发布功能,简单的实现了单个图片上传。
今天想实现多图上传(即多文件批量上传),就小试了一下牛刀,几经周折也算实现了多文件上传,并增加额外参数到提交到后台,今天将前端相关的html代码和js代码分享一下:
实现多文件上传、预览、增加额外参数相关的js代码如下:
因为layui的多表单提交不能像通常情况下,通过name="pic[]"来实现,必须通过以下形式实现,所以需要动态赋值。
就是这样,虽然代码不是特别的优化,能实现功能就好,或许数天时候再次遇到类似问题时会有更好的代码实现。关于上传接口这一块实现这一块可参考上一篇文章。