前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几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. CSS:表格样式(设置表格边框/文字/背景的样式)

    使用CSS能够制作出十分精美的表格. 代码整理自w3school:http://www.w3school.com.cn 效果图: 代码: <!DOCTYPE html PUBLIC " ...

  2. 网页媒体播放利器 - JW Player使用心得

    序言 前段时间在做一个网站项目,要求能在线播放视频.音乐,这个以前还真没接触过.恰好今天在坛子里闲逛时,发现有同志对这方面也感兴趣,遂把这些整理了下,同时自己也可以复习下. 播放器需要满足以下需求: ...

  3. 给iOS 模拟器“安装”app文件

    前言 刚刚接触iOS的时候,我就一直很好奇,模拟器上面能不能直接安装app呢?如果可以,我们就直接在模拟器上面聊QQ和微信了.直到昨天和朋友们聊到了这个话题,没有想到还真的可以给模拟器“安装”app! ...

  4. Ⅰ.Spring的点点滴滴--序章

    spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架 .net篇(环境为vs2012+Spring.Core.dll) 新建一个控制台 using Spring.Context; ...

  5. 禁用 Browser Link,在浏览器调试的时候回出现大量的get,post数据。

    VS2013新增的Browser Link功能虽然“强大”,但默认是开启的,很烦人!

  6. oracle学习总结3

    1:ddl语句创建一张学生表 create table stu(id number(6) not null,name varchar2(20),age number(3),gender char(1) ...

  7. 一致性Hash算法及使用场景

    一.问题产生背景      在使用分布式对数据进行存储时,经常会碰到需要新增节点来满足业务快速增长的需求.然而在新增节点时,如果处理不善会导致所有的数据重新分片,这对于某些系统来说可能是灾难性的. 那 ...

  8. rownum与rowId

      一.RowNum Rownum是oracle生成结果集时得到的一个伪列, 按照读出行的顺序, 第一条rownum=1, 第二条=2. 对于 Oracle 的 rownum 问题,很多资料都说不支持 ...

  9. android N刷机

    1. 打开开发者选项2. 在开发者选项页面打开 oem解锁3. 运行 adb reboot bootloader4. 运行 fastboot flashing unlock5. 解压你下载的刷机包 6 ...

  10. Android之Http网络编程(一)

    Android应用作为一个客户端程序绝大部分都是需要进行网络请求和访问的,而http通信是一种比较常见并常用的通信方式. 在Android中http网络编程中有两种实现方式,一种是使用HttpURLC ...