HTML5技术

纯原生js移动端图片压缩上传插件 - ppk2

字号+ 作者:H5之家 来源:博客园 2016-03-17 17:00 我要评论( )

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜。 结果呢,呵呵。。。诶~又全是基于jquery、zepto的(这句话似乎吐槽次数太多了...

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜。

结果呢,呵呵。。。诶~又全是基于jquery、zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了,

然后当然是自己做了,先上图:

纯原生js的移动端图片压缩上传插件,不依赖任何库

用法

在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下:

单击上传

 

通过将某个自定义属性如data-form-file赋值basestr来决定上传base64字符串参数名,其他自定义属性赋值来决定其他post参数键值如data-upload-type='front',如此一来post参数将成为如下样子:

{ formFile:data:image/jpeg;base64,/9j/4......, uploadType:front }

 

将样式文件引入到页面中:

 

同时引入js文件到页面中:

初始化插件:

new LUploader(这里放需要绑定的input对象作为参数, { url: '',//post请求地址 multiple: false,//是否一次上传多个文件 默认false maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb accept: 'image/*',//可上传的图片类型 showsize:});

项目地址:https://github.com/xfhxbb/LUploader

独乐乐不如众乐乐,如果伙伴们手上没有好的手机端上传图片插件不如先拿我这个应付一下吧!

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • [移动端] IOS下border-image不起作用的解决办法 - 小路_同学

    [移动端] IOS下border-image不起作用的解决办法 - 小路_同学

    2017-05-02 12:04

  • 移动前端常用meta标签 - 0jiji0

    移动前端常用meta标签 - 0jiji0

    2017-04-21 12:00

  • 移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~ - ygjoe

    移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~ - ygjoe

    2017-04-16 11:00

  • 浓缩的才是精华:浅析GIF格式图片的存储和压缩 - 腾讯云技术社区

    浓缩的才是精华:浅析GIF格式图片的存储和压缩 - 腾讯云技术社区

    2017-04-07 15:08

网友点评
l