图片压缩上传示例

原创 1024649179 随笔 工作经验 576阅读 2018-05-30 16:40:06 举报

2018-6-7更新问题

解决压缩后只上传了一张的问题

前戏

插件:bootstrap-fileinput
不了解的可以看看我的上一篇文章。很简单。
兼容安卓端的H5手机图片上传插件
【核心代码来自于github 链接、只做小部分修改适应自己的项目】localResizeIMG


完成目标

多文件上传并压缩【问题:gif可以压缩 但是压缩完之后就不动了。。。算了 暂不解决】

引入文件

  • bootstrap.min.css
  • fileinput.min.css

给个CND自己去搜 http://www.bootcdn.cn/

html

使用form表单提交我们的图片 注意:enctype="multipart/form-data" 因为我们是使用formdata提交所以别忘记写

JS 主要功能

我们需要在页面中加入这些JS代码 自行修改适合自己项目的代码

  • 先压缩图片
  • 用一个全局变量把压缩过的图片保存下来
  • 用户点击提交表单的时候 把图片也上传过去

上传图片

JS 封装方法

对于很懒的朋友可以不用看这个 记得保存到文件 或者直接放入页面引入就可以了

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复