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

Posted 赠人玫瑰,手留余香

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯原生js移动端图片压缩上传插件相关的知识,希望对你有一定的参考价值。

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

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

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

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

用法

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

<div class="LUploader" id="demo1">
        <div class="LUploader-container">
            <input data-LUploader=\'demo1\' data-form-file=\'basestr\' data-upload-type=\'front\' type="file" />
            <ul class="LUploader-list"></ul>
        </div>
        <div>
            <div class="icon icon-camera font20"></div>
            <p>单击上传</p>
        </div>
    </div>

 

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

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

 

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

 <link rel="stylesheet" href="css/LUploader.css">

 

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

<script src="js/LUploader.js"></script>

初始化插件:

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

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

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

 

以上是关于纯原生js移动端图片压缩上传插件的主要内容,如果未能解决你的问题,请参考以下文章

Html5移动端上传图片并裁剪 - Clipic.js

原生JS,前端压缩图片方案

推荐一个用于压缩图片的JS插件:localResizeIMG

推荐一个用于压缩图片的JS插件:localResizeIMG

一款简单实用的上传文件图片插件并且兼容移动端zyupload.js

移动端压缩并ajax上传图片解决方案