html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客服中心</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="HandheldFriendly" content="true">
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" type="text/css" href="./index.css" />
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/fileinput.js"></script>
<style>
.inner{
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.problem{
width:100%;
}
</style>
</head>
<body style="height: 100vh;background-color: #EEF5FD;">
<div class="inner">
<div class="problem">
<div class="custom_img">
<!--点击上传图片 触发下面的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>
</body>
<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 + ' οnclick="imgDisplay(this)"><img οnclick="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;" οnclick="closePicture(this)">×</p></div>'
$('body').append(imgHtml);
}
function closePicture(obj) {
$(obj).parent("div").remove();
}
</script>
</html>
js:
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 1125) + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
css:
/*å…¬å…±æ ·å¼*/
* {
margin: 0;
box-sizing: border-box;
padding: 0;
-webkit-overflow-scrolling: touch;
}
html,
body,
h1,
h2,
h3,
h4,
p,
div,
ul,
li,
ol,
dl,
dt,
dd,
span,
i,
em,
strong,
button,
table,
textarea,
input,
b,
nav,
footer,
form,
frame,
img,
select {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-style: normal;
text-underline: none;
}
html {
-webkit-overflow-scrolling: touch;
}
body {
/*font-family: "Arial","Microsoft YaHei","黑体","宋体","sans-serif";*/
background: #fff;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
margin: 0 auto;
position: relative;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
color: #666;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
a:hover {
text-decoration: none
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after,
.clearfix:before {
display: block;
content: "";
height: 0;
clear: both;
width: 0;
}
.Container {
width: 1200px;
margin: 0 auto;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
[v-cloak] {
display: none;
}
.inner{
width: 100%;
margin: 0 auto;
}
.custom_img{
width: 100%;
height: 5rem;
background-color: #fff;
padding: 0 0.4rem;
}
.custom_img_top{
font-size: 0.4rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.custom_img_top p{
line-height: 1rem;
}
.custom_sub{
width: 3rem;
height: 0.8rem;
background-color: #418BFB;
border-radius: 0.8rem;
font-size: 0.4rem;
color: #fff;
line-height: 0.8rem;
display: block;
margin: 0 auto;
margin-top: 0.6rem;
}
.upload_img{
width: 3rem;
height: 3rem;
}
.upload_img_wrap{
display: flex;
width: 100%;
}
#imgBox{
display: flex;
}
.imgContainer {
display: inline-block;
width: 3rem;
height: 3rem;
margin-left: 1%;
border: 1px solid #666666;
position: relative;
box-sizing: border-box;
margin-right: 0.2rem;
}
.imgContainer img {
width: 100%;
height: 100%;
cursor: pointer;
margin-right: 0.2rem;
}
.upload_img_wrap .imgDelete{
width: 0.8rem;
height: 0.8rem;
position: absolute;
top: -0.3rem;
right: -0.5rem;
}
.imgContainer p {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 30px;
background: black;
text-align: center;
line-height: 30px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
display: none;
}
.imgContainer:hover p {
display: block;
}
效果：
6362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
