`

多张照片上传

 
阅读更多
思路：

将照片转base64传后台

<!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>多张照片上传</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;
	
	$(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)) {
		            alert("图片大小不能超过" + imgSize + "MB");
		            $(this).val("");
		            return;
		        }
		        
		        //创建预览外层
		        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);
				
				//创建进度条
		        var imgProgress = document.createElement("div");
		        imgProgress.setAttribute("class", "lookimg_progress");
		        $(imgProgress).append(document.createElement("div"));
		        $(preDiv).append(imgProgress);
		        
		        //记录此对象对应编号
        		preDiv.setAttribute("num", $(this).attr("num"));
        		
        		//对象注入界面
		        $("#div_imglook").append(preDiv);
		        
		        //编号增长防重复
		        upImgCount++;
		        
		        //预览功能 start
		        var reader = new FileReader();//创建读取对象
		        reader.onloadend = function () {
		            preView.src = reader.result;//读取加载，将图片编码绑定到元素
		        }
		        if (file) {//如果对象正确
		            reader.readAsDataURL(file);//获取图片编码
		        } else {
		            preview.src = "";//返回空值
		        }
		        //预览功能 end
			}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"));
		 });
	}
</script>
</head>
<body>
	<!-- 图片预览 -->
	<div id="div_imglook">
		
	</div>
	<button id="div_imgfile">选择照片</button>
	</br>
	<button onclick="submitForm()">提交</button>
</body>
</html>

 

分享到：
| java内存中初始化数据字典
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics