使用【百度webuploader插件】异步上传图片

【效果:】

使用【百度webuploader插件】异步上传图片

【图片文件夹:】

使用【百度webuploader插件】异步上传图片

【说明】我们经常遇见图片上传和input框同时提交的情况,通常用form表单,使用插件异步上传,用户体验更好。

【步骤】

1下载:

官网:https://fex.baidu.com/webuploader/

使用【百度webuploader插件】异步上传图片放入项目中


2引入路径

点击快速开始:

使用【百度webuploader插件】异步上传图片

使用【百度webuploader插件】异步上传图片


使用【百度webuploader插件】异步上传图片

3、点击图片上传 复制demo

使用【百度webuploader插件】异步上传图片


使用【百度webuploader插件】异步上传图片

4,复制js源码 页面拉到最下边 点击查看js源码

使用【百度webuploader插件】异步上传图片

有文件上传部分和图片上传部分,复制图片上传部分

使用【百度webuploader插件】异步上传图片

4、修改配置

使用【百度webuploader插件】异步上传图片

使用【百度webuploader插件】异步上传图片

使用【百度webuploader插件】异步上传图片

5、ajax上传 处理input:map[]

使用【百度webuploader插件】异步上传图片

使用【百度webuploader插件】异步上传图片

6、回到服务器上传方法

使用【百度webuploader插件】异步上传图片

6、开始上传图片吧!

使用【百度webuploader插件】异步上传图片

使用【百度webuploader插件】异步上传图片

7、剩下的写后台逻辑,你可以直接把图片url直接存数据表,或者以‘,’号分割字符串分别添加到数据表

8、大功告成!

附:删除图标使用【百度webuploader插件】异步上传图片

微信扫码向我提问: