涉及到网页图片的交互，少不了图片的压缩上传，相关的插件有很多，相信大家都有用过，这里我就推荐三款，至于好处就仁者见仁喽：
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
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。