关键词：
前段时间，同事又来咨询一个问题了，说手机端动不动拍照就好几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
独乐乐不如众乐乐，如果伙伴们手上没有好的手机端上传图片插件不如先拿我这个应付一下吧！
移动端图片压缩上传解决方案
最近做移动端图片上传，发现图片尤其是iPhone拍照的图片都有2M左右，但是实际上项目中用不到这么大，于是想到要用js在前台进行压缩。解决方案如下： 【一】获取图片数据 先是获取图片数据，也就是监听inputfile的change... 查看详情
快速创建vue移动端上传图片功能
参考技术A主要功能：限制图片张数、图片大小压缩、同时上传多张、上传后可编辑删除、上传中和上传失败状态显示。使用配置：使用vantUI、axios请求经过封装、安装image-compressor.js图片压缩npminstallimage-compressor.js//注意是image-comp... 查看详情
图片移动端图片上传旋转压缩的解决方案
移动端图片上传旋转、压缩的解决方案来源知乎 作者 林鑫 工作上有手机上传准考证等图片的功能，这个是非常必要的，作者写的很全面，就直接记录这个地址了 还有一篇文件的上传、下载 查看详情
vue移动端图片上传，可最多上传9张,使用webuploader插件
参考技术A图片上传WebUploader.js 查看详情
推荐一个用于压缩图片的js插件：localresizeimg(代码片段)
...嘛要压缩图片，这需求一般出现在需要上传照片（尤其是移动端）的情况下，现在手机拍出来的照片随随便便就是好几兆，无论3/4G还WIFI要上传都很吃力，而且实际上也用不着这么大呀，一般压缩到个一百几十k就够用了。因此，... 查看详情
推荐一个用于压缩图片的js插件：localresizeimg(代码片段)
...嘛要压缩图片，这需求一般出现在需要上传照片（尤其是移动端）的情况下，现在手机拍出来的照片随随便便就是好几兆，无论3/4G还WIFI要上传都很吃力，而且实际上也用不着这么大呀，一般压缩到个一百几十k就够用了。因此，... 查看详情
h5移动端实现图片文件上传(代码片段)
PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。 JS代码：<scripttype="text... 查看详情
移动端图片上传旋转压缩的解决方案
在手机上通过网页input标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括iPhone和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照... 查看详情
移动端h5如何上传zip文件
参考技术A移动端h5上传zip文件方法：1、拍照或者选择图片并获取图片的路径。2、压缩图片。3、找到压缩完的图片先转换成base64再转换成可以添加到FormData上传的File。4、添加数据上传。 查看详情
js原生选项卡（包含移动端无缝选项卡）三
今天分享下移动端原生js的无缝轮播图；移动端尽量减少使用DOM操作来频繁的浪费移动端设备的性能，所以这个无缝轮播图更多的使用了transition和transform，无缝的思想和昨天分享的PC端的无缝轮播的思想是一样的，分别在正常的... 查看详情
exif.js获取图片的详细信息(苹果手机移动端上传图片旋转90度)
Exif.js插件介绍http://code.ciaoca.com/javascript/exif-js/ iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案https://www.jianshu.com/p/ad4501db178e 查看详情
移动端图片上传预览
前天要做wap版的图片上传预览，找了好半天才找到比较适合的插件，我在该插件的基础上修改了一些东西，比如：上传后的图片删除后不能再添加、不能限制上传图片的数量。input虽然有multiple（多选），但是android目前是不支持... 查看详情
angularjs+ionic移动端图片上传的解决办法
...己写一个图片上传的方法。今天的demo是帮朋友做的一个移动端微信公众号项目，项目架构采用angular+ionic，因为对dom的操作jQuery会方便很多，但是j 查看详情
前端仿移动端时间插件，百度上传图片插件，监听滚动插入内容(代码片段)
仿移动端时间：https://docs.mobiscroll.com/jquery/eventcalendar#usage 结构：<inputid="scroller"/> 百度上传图片插件http://fex.baidu.com/webuploader/download.html监听滚动，可用来插入内容https://iiunknown.g 查看详情
移动端上传照片
...件，在这里我要感谢作者，虽然不知道是谁。应用场景：移动端管调用手机相册和相机，上传图片给接口进行识别插件下载百度云地址：链接:https:// 查看详情
前端获取图片压缩后上传给后台
此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果链接在文章底部贴出。 在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片... 查看详情
前端获取图片压缩后上传给后台
此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果链接在文章底部贴出。 在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片... 查看详情
使用原生js封装tap事件，解决移动端300ms延迟
为了防止误操作，移动端iOS操作系统针对原生click事件做了300ms的延迟，这在一定程度上影响了我们的使用体验。GitHub项目地址：https://github.com/SimonZhangITer/MyTapEventFastClick现在有现成的插件fastclick可以解决这个问题，但是也有... 查看详情