移动端和pc端上传图片并预览和删除
2019-04-21 本文已影响0人
我是一小白白
实现功能如图：
商品详情图片最多添加4张，缩略图最多1张，banner图最多一张。
每添加一张图片，就隐藏一个input框，当达到限定张数时，添加图片按钮消失，input框全部隐藏。
用户添加图片后可以点击小图右上角的 × 删除添加的图片。
这可以用ajax提交form表单，图片url地址已经转换为直接可以用的地址了，直接传到后端就行。
image.png
话不多说，代码如下，整个代码拿走，直接就可以用。不需要添加和改变任何的东西：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<title>Title</title>
<style>
.photos input[type='file'] {
opacity: 0;
position: absolute;
left: 0;
top: 0;
}
.photos img, .photos input[type='file'] {
width: 100px;
height: 100px;
margin-right: 30px;
margin-top: 10px;
transition: all .4s;
}
td{
position: relative;
height: 150px;
left: 20px;
top:20px;
width: 550px
}
.photos div {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 30px;
position: relative;
}
.delClose{
height: 20px;
width: 20px;
background-color:red;
border-radius:50%;
position: absolute;
right: 0;
top: 0;
text-align: center
}
</style>
</head>
<body>
<form class="addForm" action="#" method="post" enctype="multipart/form-data" style="">
<table>
<tbody>
<tr class="photosDetail">
<th>商品详情图片</th>
<td class="photos pic1" >
<img class="photo photo1" style="margin-left: -10px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555860381757&di=e22648e4d8629323577c36fdd133fb64&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F21%2F02%2F16pic_2102530_b.jpg" >
</td>
</tr>
<tr class="photoThumbnail">
<th>缩略图</th>
<td class="photos pic2">
<img class="photo photo2" style="margin-left: -10px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555860381757&di=e22648e4d8629323577c36fdd133fb64&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F21%2F02%2F16pic_2102530_b.jpg" >
</td>
</tr>
<tr class="photoBanner">
<th>banner</th>
<td class="photos pic3">
<img class="photo photo3" style="margin-left: -10px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555860381757&di=e22648e4d8629323577c36fdd133fb64&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F21%2F02%2F16pic_2102530_b.jpg" >
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
<script>
$(function(){
for(var i = 1; i < 5; i++) {
$(".addForm .photosDetail .photo").before('<input id="fileBtn_add' + i + '" type="file" onchange="upload(this,1,'+i+');" name="pictureName'+ i +'" accept="image/*" class="fileBtn_add' + i + '" />');
}
$(".addForm .photoThumbnail .photo").before('<input id="fileBtn_add5" type="file" onchange="upload(this,2,5);" name="pictureName5" accept="image/*" class="fileBtn_add5" />');
$(".addForm .photoBanner .photo").before('<input id="fileBtn_add6" type="file" onchange="upload(this,3,6);" name="pictureName6" accept="image/*" class="fileBtn_add6" />');
});
var aCount = 0;
var bCount = 0;
var cCount = 0;
//添加图片
function upload(c,index,index2) {
"use strict";
var $c = c,
$d = document.createElement('img'),
file = $c.files[0],
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
$d.setAttribute("src", e.target.result);
$($d).addClass($($c).attr('class'));
console.log($(".addForm .photos input").index(this) + 1);
var div = document.createElement('div');
div.className = 'tuPic';
$(div).append($d);
$(div).append("<span class='delClose' onclick='delPic(this,"+index2+")'>X</span>");
if (index==1){
aCount++;
if (aCount==4){
$(".photo1").hide();
}
}else if(index==2){
bCount++;
$(".photo2").hide();
}else {
cCount++;
$(".photo3").hide();
}
$(".addForm .pic"+index).append(div);
$("#fileBtn_add"+index2).hide();
};
}
// 删除对应input框的缩略图和文件
function delPic(e,index2) {
resetFileInput($("#fileBtn_add"+index2));
switch (index2) {
case 1:
case 2:
case 3:
case 4:
aCount--;
if (aCount==3){
$(".photo1").show();
}
break;
case 5:
bCount--;
$(".photo2").show();
break;
case 6:
$(".photo3").show();
cCount--;
}
$(e).parent().remove();
$('#fileBtn_add'+index2).show();
}
// 加号图片隐藏的规则
var ruleHide = function(){
if(($(".pic4 .stagePic").length+$(".pic4 .tuPic").length)!=4){
$(".photo4").show();
}else if(($(".pic4 .stagePic").length+$(".pic4 .tuPic").length)==4){
$(".photo4").hide();
}
if(($(".pic5 .stagePic").length+$(".pic5 .tuPic").length)==0){
$(".photo5").show();
}else{
$(".photo5").hide();
}
if(($(".pic6 .stagePic").length+$(".pic6 .tuPic").length)==0){
$(".photo6").show();
}else{
$(".photo6").hide();
}
};
//清除input框内的文件内容
function resetFileInput(file){
file.after(file.clone().val(""));
file.remove();
}
</script>
