纯原生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移动端图片压缩上传插件的更多相关文章

基于vue + axios + lrz.js 微信端图片压缩上传
业务场景微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
js 图片压缩上传（base64位）以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
基于H5+ API手机相册图片压缩上传
// 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照 ...
PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片
2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切旋转再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...
springMVC多图片压缩上传的实现
首先需要在配置文件中添加配置:  <bean id="multipar ...
图片剪裁上传插件 - cropper
图片剪裁上传插件 - cropper <style> .photo-container{float: left;width: 300px;height: 300px;} .photo-co ...

随机推荐

phpcms手机门户相关
相关标签 {$WAP['sitename']}标题 {list_url(3)} 调取栏目链接 {template "wap","header"}{templat ...
close与shutdown函数
linux网络编程之socket(十):shutdown 与 close 函数的区别 http://blog.csdn.net/yijiu0711/article/details/17349169 ...
ionic滑动框 ---轮播图（ion-slide-box）的使用
1. html : <ion-slide-box auto-play="true" slide-interval=3000 show-pager="false&qu ...
SoC嵌入式软件架构设计
内存是SoC(System on Chip,片上系统)集成设计的重要模块,是SoC中成本比重较大的部分.内存管理的软硬件设计是SoC软件架构设计的重要一环,架构设计师必须要在成本和效率中取得平衡,做到 ...
ILBC 规范 2
接上篇 <ILBC 规范> https://www.cnblogs.com/KSongKing/p/10354824.html , ILBC 的目标是跨平台跨设备 ...
Python示例
http request:put # 定义函数:refresh segement # curl -X PUT -s --user "****:*****" -H 'Content- ...
修改IP地址的PowerShell
$wmi = Get-WmiObject win32_networkadapterconfiguration -filter "ipenabled = 'true'" $wmi.E ...
[javase学习笔记]-8.6 静态的内存载入
之前几节我们一直在说statickeyword所修饰的静态,那么在程序执行时,内存中static是怎样体现的呢?这一节我们就来看一看. 我们还是先看一个样例.希望我们通过对这个样例的分析让我们刚開始学 ...
生产者消费者问题Java三种实现
生产者-消费者Java实现 2017-07-27 1 概述生产者消费者问题是多线程的一个经典问题,它描述是有一块缓冲区作为仓库,生产者可以将产品放入仓库,消费者则可以从仓库中取走产品. 解决生产者/ ...
VS2015 未能正确加载 JavascriptWebExtensionsPackage
解决方法: Close Visual Studio Open the %UserProfile%\AppData\Local\Microsoft\VisualStudio\<version> ...

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

用法

纯原生js移动端图片压缩上传插件的更多相关文章

随机推荐

热门专题