前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几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移动端图片压缩上传插件的更多相关文章

  1. 基于vue + axios + lrz.js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

  2. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  3. js 图片压缩上传(base64位)以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  4. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  5. 基于H5+ API手机相册图片压缩上传

    // 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照 ...

  6. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  7. 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片

    2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...

  8. springMVC多图片压缩上传的实现

    首先需要在配置文件中添加配置: <!--配置文件的视图解析器,用于文件上传,其中ID是固定的:multipartResolver--> <bean id="multipar ...

  9. 图片剪裁上传插件 - cropper

    图片剪裁上传插件 - cropper <style> .photo-container{float: left;width: 300px;height: 300px;} .photo-co ...

随机推荐

  1. KindEditor 给KindEditor赋值

    在项目的过程中,使用了KindEditor编辑器,然后在赋值的时候,我的编辑器ID是content,然后我想通过$("#content").html()来赋值,发现赋值失败,后来百 ...

  2. NDT(Normal Distribution Transform) 算法(与ICP对比)和一些常见配准算法

    原文地址:http://ghx0x0.github.io/2014/12/30/NDT-match/ By GH 发表于 12月 30 2014 目前三维配准中用的较多的是ICP迭代算法,需要提供一个 ...

  3. Spring 4 官方文档学习(十二)View技术

    关键词:view technology.template.template engine.markup.内容较多,按需查用即可. 介绍 Thymeleaf Groovy Markup Template ...

  4. Python的数据处理学习(三)

    三.类的继承   Python 的class可以允许从零开始创建一个定制类,就像文章(二)创建Athlete类一样,也可以通过继承现有的其他类类创建一个类,这也包括用List.set和dict提供的p ...

  5. linux安装rzsz

    rz,sz是Linux/Unix同Windows进行ZModem文件传输的命令行工具优点:比ftp命令方便,而且服务器不用打开FTP服务. sz:将选定的文件发送(send)到本地机器rz:运行该命令 ...

  6. QTabWidget and QTabBar.的文字的颜色设置,三种方法

    see the code after subclassingTabWidget::TabWidget(QWidget *parent): QTabWidget(parent),mousePressFl ...

  7. .NET使用存储过程实现对数据库的增删改查

    一.整体思路 先建立存储过程,再通过.net 调用存储过程,来实现对表的增删改查. 二.新建数据库及存储过程 打开SqlServer2008,新建数据库orm1,及表Student. 数据库和表建立好 ...

  8. win7 数据源只有 SQL SERVER, WIN7 64bit 环境使用 access 作为 CIS的数据源

    最近换了个工作电脑,安装的是 WIN7 64BIT,结果配置CIS数据源的时候出现问题了,默认的数据源只有 SQL SERVER,没有ACCESS的数据源.后来在网上寻找了一圈后,找到了解决方法: C ...

  9. python-享元模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 如果一个软件系统在运行时所创建的相同或相似对象数量太多,将导致运行代价过高,带来 ...

  10. 我的emacs简易配置

    ;;------------语言环境字符集设置(utf-8)------------- (set-language-environment 'Chinese-GB) (set-keyboard-cod ...