涉及到网页图片的交互，少不了图片的压缩上传，相关的插件有很多，相信大家都有用过，这里我就推荐三款，至于好处就仁者见仁喽：
1.名气最高的WebUploader，由Baidu FEX 团队开发，以H5为主，FLASH为辅，兼容 IE6+，iOS 6+, android 4+，采用大文件分片并发上传，极大的提高了文件上传效率，看了官方文档就知道，能满足你所需要的所有功能，一言以蔽之，大而全；至于缺点，大概就是插件体积太大了，自带样式文件，而且还要依赖jquery类库。详细的教程网上俯拾即是，这里我就附上一段简单的demo：
<!Doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/>
<title>实验</title>
<style>
*{
margin:0;
padding:0;
}
.progress{
height:50px;
background-color: red;
}
</style>
<link rel="stylesheet" href="assets/webuploader.css" rel="external nofollow" >
</head>
<body>
<div class="myuploader">
<!--用来存放文件信息-->
<div class="uploader-list">
</div>
<!-- 放置按钮 -->
<div class="btns">
<div id="picker">选择文件</div>
<!-- <button class="send">开始上传</button> -->
</div>
</div>
<img src="/UploadFiles/2021-04-02/">
2.移动端的插件，如果能脱离jquery，并且能满足项目的基本需求就再好不过了，这里像localResizeIMG就做得不错，它有4个历史版本，建议引入最新稳定版本localResizeIMG4，demo如下（样式要自己写）：
<!Doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/>
<title>实验</title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<!-- capture="camera"可以出现拍照；accept="image/*"仅接受图片 -->
<input type="file" id="file" name="logo" capture="camera" >
<!-- 一般情况下引入lrz.bundle.js，但绝对不要删除目录下的*.chunk.js，这些文件分别对应了IOS和Android的兼容代码，检测到符合环境时会自动引入，lrz.all.bundle.js是包含了所有引用了，莫名其妙的问题下就引用这个吧 -->
<script src="/UploadFiles/2021-04-02/lrz.bundle.js">
3.以上两款优缺点一目了然，本人公司用的是LUploader，纯原生js写的，不依赖任何类库，压缩后的js文件只有5k，实现图片压缩上传只需三步：
(1)在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"></div>
<p>单击上传</p>
</div>
</div>
(2)将样式文件和js文件引入到页面中：
<link rel="stylesheet" href="css/LUploader.css" rel="external nofollow" >
<script src="/UploadFiles/2021-04-02/LUploader.js">
(3)js脚本中初始化插件：
new LUploader(这里放需要绑定的input对象作为参数, {
url: '',//post请求地址
multiple: false,//是否一次上传多个文件 默认false
maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb
accept: 'image/jpg,image/jpeg,image/png',//如果写成image/*会出现响应慢的问题
quality: 0.1,//压缩比 默认0.1 范围0.1-1.0 越小压缩率越大
showsize:false//是否显示原始文件大小 默认false
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。