<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>多张照片上传大于1M图片压缩</title>
<style type="text/css">
/*选择图片框样式*/
#div_imgfile {
width: 130px;
height: 75px;
text-align: center;
line-height: 75px;
font-family: 微软雅黑;
font-size: 16px;
box-sizing: border-box;
border: 2px solid #808080;
cursor: pointer;
}
/*文本框input file隐藏*/
.imgfile {
display: none;
}
/*图片预览容器样式*/
#div_imglook {
margin-top: 20px;
background-color: #FFEFD5;
}
/*单个图片预览模块样式*/
.lookimg {
width: 130px;
height: 130px;
box-sizing: border-box;
border: 1px solid #808080;
float: left;
margin-right: 10px;
position: relative;
}
/*删除按钮样式*/
.lookimg_delBtn {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #808080;
opacity: 0.8;
color: white;
font-size: 16px;
font-family: 微软雅黑;
display: none;
cursor: pointer;
}
/*上传进度条样式*/
.lookimg_progress {
position: absolute;
bottom: 15px;
left: 0px;
width: 100%;
height: 20px;
background-color: #e0e0e0;
box-sizing: border-box;
border: 1px solid black;
display: none;
text-align: center;
line-height: 20px;
font-size: 14px;
}
/*删除按钮移入移出效果*/
.lookimg_delBtn:hover {
opacity: 1;
}
.lookimg img {
width: 100%;
height: 100%;
}
.lookimg_progress div {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 0px;
background-color: #e9cc2e;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//照片大小限制1M
var imgSize = 1;
//照片数量限制3张
var imgCount = 3;
//上传图片张数记录
var upImgCount = 0;
//默认照片质量
var quality = 0.7;
//缩放比例
var scalingRatio = 0.2;
$(function(){
//打开选择文本框，创建file文本框
$("#div_imgfile").click(function(){
//判断照片数量
if($(".lookimg").length >= imgCount){
alert("一次最多上传" + imgCount + "张图片");
return;
}
//创建一个input
var carFile = document.createElement("input");
if ($(".imgfile").length <= $(".lookimg").length) {
carFile.setAttribute("type", "file");
carFile.setAttribute("class", "imgfile");
carFile.setAttribute("accept", ".png,.jpg,.jpeg");
carFile.setAttribute("num", upImgCount);
$("#div_imgfile").after(carFile);
}else{
carFile = $(".imgfile").eq(0).get(0);
}
return $(carFile).click();
});
//绑定change事件，将照片回显页面
$(document).on("change", ".imgfile", function () {
//判断是否有照片
if ($(this).val().length > 0) {
//判断照片格式
var imgFormat = $(this).val().substr($(this).val().length - 3, 3);
if (imgFormat != "png" && imgFormat != "jpg" && imgFormat != "peg") {
alert("照片格式不正确！！！");
return;
}
//判断图片是否过大，当前设置1MB,获取file文件对象
var file = this.files[0];
if (file.size > (imgSize * 1024 * 1024)) {
//加载照片后压缩
loadIMG(file);
}else{
//加载照片
var reader = new FileReader();
reader.onloadend = function () {
var base64Img = reader.result;
createPic(base64Img);
}
reader.readAsDataURL(file);
}
}else{
alert("请选择照片");
}
});
//删除绑定click事件
$(document).on("click", ".lookimg_delBtn", function () {
$(".imgfile[num=" + $(this).parent().attr("num") + "]").remove();//移除图片file
$(this).parent().remove();//移除图片显示
});
//删除按钮绑定移入移出效果
$(document).on("mouseover", ".lookimg", function () {
$(this).children(".lookimg_delBtn").eq(0).css("display", "block");
});
$(document).on("mouseout", ".lookimg", function () {
$(this).children(".lookimg_delBtn").eq(0).css("display", "none");
});
});
//传后台
function submitForm(){
$(".lookimg > img").each(function(){
console.log($(this).attr("src").length);
});
}
//照片压缩
function photoCompress(path, obj){
console.log("压缩前照片大小："+path.length);
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64Img = canvas.toDataURL('image/jpeg', quality);
console.log("压缩前照片大小："+base64Img.length);
// 压缩后base64的值
createPic(base64Img);
}
}
//加载照片
function loadIMG(file){
var path;
var reader = new FileReader();//创建读取对象
reader.onloadend = function () {//回调
path = reader.result;//读取加载，将图片编码绑定到元素
//压缩照片
photoCompress(path, scalingRatio);
}
reader.readAsDataURL(file);//获取图片编码
}
//创建页面存放照片的
function createPic(base64Img){
//创建预览外层
var preDiv = document.createElement("div");
preDiv.setAttribute("class", "lookimg");
//创建内层img对象
var preView = document.createElement("img");
$(preDiv).append(preView);
//创建删除按钮
var imgDel = document.createElement("div");
imgDel.setAttribute("class", "lookimg_delBtn");
imgDel.innerHTML = "移除";
$(preDiv).append(imgDel);
//记录此对象对应编号
preDiv.setAttribute("num", $(this).attr("num"));
//对象注入界面
$("#div_imglook").append(preDiv);
//编号增长防重复
upImgCount++;
preView.src = base64Img;
}
</script>
</head>
<body>
<!-- 图片预览 -->
<div id="div_imglook">
</div>
<button id="div_imgfile">选择照片</button>
</br>
<button onclick="submitForm()">提交</button>
</body>
</html>
分享到：
相关推荐
首先做长宽压缩，如果图片太大，先做长宽压缩，暂定大于2M（大小读者可以自己设置）循环做长宽压缩（暂定长宽都压缩一半,山样读者可以自己设置大小），其次做质量压缩，大于1M，循环做质量压缩，直到图片大小在1m...
上述代码展示了如何使用`FileUpload`控件获取用户上传的图片，并将其转换为`Bitmap`对象，然后调用`ImageGdi`方法进行压缩处理，最后将压缩后的图片转换为`Image`对象显示出来。 下面，我们来看一下`ImageGdi`方法...
在Vue移动端应用中，图片上传和超过1MB的图片压缩上传是常见的功能需求。这篇文章将指导你如何在Vue项目中实现这一功能。首先，我们来看看实现这个功能的主要步骤和涉及的技术点。 1. **HTML 结构**： HTML部分...
tensorflow谷歌编译器，不能传大于60M，压缩了，内部有校检文件
tensorflow谷歌编译器，不能传大于60M，压缩了，内部有校检文件
本文将详细介绍如何在iOS中按照尺寸或等比例对图片进行压缩，主要参考提供的UIImage+ImageScaleSize.m和UIImage+ImageScaleSize.h这两个文件。 首先，我们需要理解图片压缩的基本原理。图片压缩通常有两种方式：...
java实现上传图片并压缩图片大小功能 java实现上传图片并压缩图片大小功能是指使用java语言实现上传图片并对其进行压缩处理，以达到减少图片大小的目的。在本文中，我们将详细介绍如何使用java实现上传图片并压缩...
电脑微信限制25m视频，大于25m的视频上传不上去。有时候我们录屏教别人东西时候：轻轻松松将80m录制好的视频压缩为5m视频发出去就可以了，画质还挺清晰的，压缩比十几倍吧。输出结果在本程序目录下。 压缩视频文件...
java图片压缩，处理前台上传大图片（尼玛，大于20个字俺特么怎么编啊）
WisMencoder、Caesium V1.7.0绿色版；相信大家在上传图片和视频时都有遇到过文件太大不能上传或要求上传的视频图片不能大于多少M或KB，这两个软件完美解决这些问题
1. 图片上传和存储路径：在***中，首先需要一个上传控件，例如HtmlInputFile或FileUpload控件，用户可以使用它来上传图片。上传后，通常会将图片保存在服务器上的某个文件夹中。例如，在代码中使用了变量strImgPath...
想尝试的人也可以去看下，但是当我压缩的时候发现，压缩时间很慢，比如压缩1分46秒（253M，ViVO x7 plus）的视频花了2分多钟，具体时间自己可以去测，因为项目需要上传本地视频，本地视频一般很大。。假如是5分钟的...
《_Linux程序设计(第四版)》大于100M，所以分成三部分上传，这是第一部分。
1、批量压缩图片,由于图片比较大,可能不太方便上传,此文件可以进行压缩. 压缩规格 宽度500,高度自动 图片格式:gif,jpg,jpeg,png,bmp 图片大小:大于1M的图片 限制条件如下: 图片如果小于1M,返回,宽度如果小于...
在实际操作中，可能还需要对服务器进行更多优化，例如启用Gzip压缩减少传输数据量，或者使用分块上传策略处理大文件。 总的来说，调整KindEditor插件的文件上传限制涉及前端编辑器的配置和后端服务器的PHP设置。...
标题提到的"上传图片怎么调整大小KB"涉及到图像处理，而描述中的"利用FOA算法来优化SVM算法中的两个参数"则聚焦于机器学习和优化技术。以下是这些知识点的详细说明： **1. 图像大小调整** 在上传图片时，我们经常...
在本文中，我们将探讨如何使用JavaScript实现压缩上传图片的功能，特别是关注如何减少base64编码后的图片数据长度。这个过程对于优化图像在网络中的传输效率，减少服务器存储空间，以及提高用户体验都是至关重要的。...
图片有预览功能，可以在预览的同时删除某个不需要的图片和添加其它图片，检测图片类型和大小功能，小于1M或2M可以自己设置，固定图片的尺寸，宽大于500PX的设置为固定宽500px，高随比例调整保证图片不出现畸形，小于...
描述中的信息提示这是一个大压缩包，因为超过了15MB，所以被分成了两部分上传，这部分是第一部分。要完全恢复这个压缩包，用户需要下载两个部分（SSH2-2可能是第二部分的名称），然后将它们解压缩。这通常意味着用户...
如果你的图片是要准备上传的，那动辄几M的大小肯定不行的，况且图片分辨率大于设备分辨率的话毫无意义。 2、内存原因 如果图片要显示下Android设备上，ImageView最终是要加载Bitmap对象的，就要考虑单个Bitmap对象...