h5图片上传，获取本地图片地址

最新推荐文章于 2023-04-26 17:40:37 发布

nuc_八道门

最新推荐文章于 2023-04-26 17:40:37 发布

阅读量1.4k

点赞数 2

分类专栏：软件开发前端开发

本文链接：https://blog.csdn.net/nuc_badaomen/article/details/102502529

版权

软件开发同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

前端开发

28 篇文章 0 订阅

订阅专栏

说明：此处图片还未上传到服务器，点击提交才会上传到服务器

效果：

前端代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品评论</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="./comment_add.css">
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
</head>
<body>
	<header>
		<div onclick="history.back()"></div>
		<div>评价晒单</div>
		<div></div>
	</header>
	<div class="content">
		<div class="top">
			<div>
				<img src="{$goods.images}" alt="">
			</div>
			<ul class="star">
				<li class="active"></li>
				<li class="active"></li>
				<li class="active"></li>
				<li class="active"></li>
				<li class="active"></li>
			</ul>
		</div>
		<div class="top2">
			快来分享你的体验吧
		</div>
		<div class="cont">
			<textarea name="content" cols="30" rows="10" placeholder="真实的体验可以帮助更多的小伙伴哦"></textarea>
		</div>
		<div class="imgs">
			<ul>
				
			</ul>
			
			<div class="upImg">
				<input type="file" id="file" accept="image/*" />
			</div>
		</div>
	</div>
	<footer onclick="save()">
		提交
	</footer>	
</body>
</html>

css

*{
	margin:0px;
	padding:0px;
	font-size: 14px;
	font-family: '微软雅黑';
}
html,body{
	background: #F8F8F8;
}
ul{
	list-style:none;
	padding:0px;
}
img{
	width: 100%;
	height: 100%;
}
header{
	width:90px;
	height:44px;
	background:#EEEEEE;
	position: fixed;
	left:0px;
	top:0px;
	width: 100%;
}
header>div:first-child{
	float: left;
	width:44px;
	height: 44px;
	background:url('../img/back.png') no-repeat;
	background-size: ;
	background-position: center center;
}
header>div:nth-child(2){
	line-height: 44px;
	width: 50px;
	float: left;
	font-size: 12px;
	font-weight: bold;
}
.content{
	margin-top: 44px;
	padding:20px 12px;
}
.content .top{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.top>div:first-child{
	width:80px;
	height: 80px;
	overflow:hidden;
	margin-right: 12px;
}
.top ul{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.top li{
	width:30px;
	height: 30px;
	background:url('../img/star.png') no-repeat;
	background-size: 30px 30px;
	background-position: center;
	margin:0px 5px;
}
.top .active{
	background:url('../img/stared.png') no-repeat;
	background-size: 30px 30px;
	background-position: center;
}
.top2{
	margin: 12px 0px 0px 0px;
	line-height: 44px;
	height: 44px;
	color:#333;
}
.cont textarea{
	resize: none;
	border-radius: 5px;
	padding: 12px;
	outline: none;
	width: calc(100% - 24px);
	height: 100px;
}
.imgs{
	padding:12px 0px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.imgs ul{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.imgs li{
	width:50px;
	height: 50px;
	overflow: hidden;
	margin-right: 6px;
	margin-bottom: 10px;
}
.upImg{
	width: 50px;
	height: 50px;
	border-radius: 5px;
	border:1px solid #ccc;
	background: url('../img/upload.png') no-repeat;
	background-size: 30px 30px;
	background-position: center;

}
#file{
	width:50px;
	height: 50px;
	opacity: 0;
}
footer{
	width:100%;
	text-align: center;
	line-height: 44px;
	height: 44px;
	position: fixed;
	bottom:0px;
	background: #FFE66D;
	font-size:16px;
	font-weight:bold;
}

最最关键的是下面的js

<script>
	var imgs=[];
	var order_id="{$Request.param.oid}";
	var goods_id="{$Request.param.gid}";
	$('.upImg').click(function(){
		len=$('.imgs li').length;
		if(len>=5){
			layer.msg('最多上传5张');
			return;
		}
		var fileTag = document.getElementById('file');
		fileTag.onchange = function () {
			var file = fileTag.files[0];
			var fileReader = new FileReader();
			fileReader.onloadend = function () {
			  	if (fileReader.readyState == fileReader.DONE) {
			  		html='<li><img src="'+fileReader.result+'"></li>';
			  		imgs.push(fileReader.result);
			  		$('.imgs ul').append(html);
			  		len=$('.imgs li').length;
			  		if(len>=5){
			  			$('#file').remove();

			  		}
			    }
			};
			console.log(fileTag.files);
			fileReader.readAsDataURL(file);
		}
	});
	$('.star li').click(function(){
		index=$(this).index();
		$('.star li').removeClass('active');
		for (var i =0; i <=index; i++){
			$('.star li').eq(i).addClass('active');
		}
	});
	function save(){
	    postData={};
		starlevel=$('.star .active').length;
		content=$.trim($('textarea').val());
		postData.starlevel=starlevel;
		postData.content=content;
		postData.images=imgs;
		postData.goods_id=goods_id;
		postData.order_id=order_id;
		index=layer.load(3,{'time':5000});
		$.post("{:url('comment/add')}",postData,function (r) {
		    layer.close(index);
			if(r.code==1){
				url="{:url('order/detail',['id'=>'pid'])}";
				url=url.replace('pid',order_id);
				location.href=url;
			}else{
				layer.msg(r.msg);
			}
		});
	}
</script>

nuc_八道门

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5图片上传，获取本地图片地址

说明：此处图片还未上传到服务器，点击提交才会上传到服务器效果：前端代码：html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品评论</title> <meta name="viewport" co...
复制链接

扫一扫