jQuery移动端上传多图代码

jQuery上传制定的图片数量，在这里演示是上传3个图片，点击图片放大查看功能。希望对你有帮助吧。最后提交form表单到后台即可。

[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="css/main.css" />

2、head引入js文件

<script src="js/jquery.min.js"></script>
<script src="js/m.js"></script>

3、body引入HTML代码

<div class="inner">

	<div class="problem">
		<div class="custom_img">
			<div class="custom_img_top">
				<p>图片说明</p>
				<p><span class="upload_img_length">0</span>/3</p>
			</div>
			
			<!--点击上传图片 触发下面的div 点击事件-->
			<div class="upload_img_wrap">
				<div id="imgBox"></div>
				<img class="upload_img" data-id="1" src="img/upload_img.png" />
				<img style="display:none" class="upload_img" data-id="2" src="img/upload_img.png" />
				<img style="display:none" class="upload_img" data-id="3" src="img/upload_img.png" />
			</div>
			<div style="display: none;width: 100%;height: 100vh;position: relative;">
				<form id="upBox" class="upload_form" action="" method="post" enctype="multipart/form-data">
					<div style="display: none;" id="inputBox">
						<input type="file" name="image[]" data-id="1" title="请选择图片" id="file1" accept="image/png,image/jpg,image/gif,image/JPEG" />
						<input type="file" name="image[]" data-id="2" title="请选择图片" id="file2" accept="image/png,image/jpg,image/gif,image/JPEG" />
						<input type="file" name="image[]" data-id="3" title="请选择图片" id="file3" accept="image/png,image/jpg,image/gif,image/JPEG" /> 点击选择图片
					</div>
					<input style="display:none" type="submit" id="sub" />
				</form>
			</div>
		</div>
		<button class="custom_sub" id="btn">意见反馈</button>
	</div>
</div>

<script>

var imgNum = 0;
$(".upload_img_wrap .upload_img").bind("click", function(ev) {
	//console.log(ev.currentTarget.dataset.id)
	var index = ev.currentTarget.dataset.id;
	var that = this;
	if(index == 1) {
		$("#file1").click();
		$("#file1").unbind().change(function(e) {
			var index = e.currentTarget.dataset.id;
			if($('#file').val() == '') {
				return false;
			}
			$(that).hide();
			var filePath = $(this).val();
			changeImg(e, filePath, index);
			
			imgNum++;
			if(imgNum<3){
				$(".upload_img").eq(1).show();
			}
			$(".upload_img_length").html(imgNum);
		})
	} else if(index == 2) {
		$("#file2").click();
		$("#file2").unbind().change(function(e) {
			var index = e.currentTarget.dataset.id;
			if($('#file').val() == '') {
				return false;
			}
			$(that).hide();
			var filePath = $(this).val();
			changeImg(e, filePath, index);
			
			imgNum++;
			if(imgNum<3){
				$(".upload_img").eq(2).show();
			}
			$(".upload_img_length").html(imgNum);
		})
	} else if(index == 3) {
		$("#file3").click();
		$("#file3").unbind().change(function(e) {
			var index = e.currentTarget.dataset.id;
			if($('#file').val() == '') {
				return false;
			}
			var filePath = $(this).val();
			changeImg(e, filePath, index);
			$(that).hide();
			imgNum++;
			$(".upload_img_length").html(imgNum);
		})
	}
})

function changeImg(e, filePath, index) {
	fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
	//检查后缀名
	if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
		showError('文件格式必须为：png/jpg/jpeg');
		return;
	}
	//获取并记录图片的base64编码
	var reader = new FileReader();
	reader.readAsDataURL(e.target.files[0]);
	reader.onloadend = function() {
		// 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
		var dataURL = reader.result;
		// console.log(dataURL)
		// 显示图片
		$("#imgBox").html($("#imgBox").html() + '<div class="imgContainer" data-index=' + index + '><img   src=' + dataURL + ' onclick="imgDisplay(this)"><img onclick="removeImg(this,' + index + ')"  class="imgDelete" src="img/del_img.png" /></div>');
	};

}

function removeImg(obj, index) {
	for(var i = 0; i < $(".imgContainer").length; i++) {
		if($(".imgContainer").eq(i).attr("data-index") == index) {
			$(".imgContainer").eq(i).remove();
		}
	}
	for(var i = 0; i < $(".upload_img").length; i++) {
		$(".upload_img").eq(i).hide();
		if($(".upload_img").eq(i).attr("data-id") == index) {
			console.log($(".upload_img").eq(i).attr("data-id"))
			$(".upload_img").eq(i).show();
		}
	}
	imgNum--;
	$(".upload_img_length").html(imgNum);
}


function imgDisplay(obj) {
	var src = $(obj).attr("src");
	var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;display: flex;justify-content: center;    align-items: center;"><img src=' + src + ' style="margin-top: 100px;width: 96%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
	$('body').append(imgHtml);
}

function closePicture(obj) {
	$(obj).parent("div").remove();
}
</script>

文件目录

本资源来自：代码 » 其他特效 » jQuery移动端上传多图代码

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！