多张照片上传_大于1M压缩 -

1021571516

浏览: 41961 次
性别:
来自: 上海

最近访客更多访客>>

knight_black_bob

wo_b哭

wulugeng-2018

bjl66666611

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

多张照片上传_大于1M压缩

博客分类：

jQuery

<!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>

分享到：

封装jdbc | 多张照片上传

2018-12-07 15:54
浏览 433
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

多张照片上传_大于1M压缩

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

多张照片上传_大于1M压缩

评论

发表评论

相关推荐

多张照片上传

table增、删、获取值

最近访客更多访客>>