zoukankan      html  css  js  c++  java
  • 纯原生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

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

  • 相关阅读:
    异步编程:利用委托实现的.NET历史上第一个异步编程模型
    C#:委托
    C#:方法参数之--扩展方法
    py实现ftp
    sftp接口机上传脚本
    通过telnet自动下载cfg配置文件
    下载bat脚本
    solairs11与solairs10 ftp服务的区别
    windows中ftp下载脚本(bat+vb)
    windows2008r2防火墙设置一例
  • 原文地址:https://www.cnblogs.com/xfhxbb/p/LUploader.html
Copyright © 2011-2022 走看看