上传图片（最多可以上传5张图片）
2020-05-15 本文已影响0人
我是小笨蛋_b1ff
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传图片（最多可以上传5张图片）</title>
<style>
* {margin:0;padding:0;}
.up-section .type-upimg {display:none;}
::-ms-clear,::-ms-reveal {display:none;}
textarea {outline:none;line-height:14px;padding-left:4px;padding-top:4px;border:1px solid #ccc;color:#444;font-size:14px;outline:none;text-align:left;}
.overflow {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
button {outline:none;border:0px;}
input {outline:none;}
a {outline:none;}
a,button {cursor:pointer;}
body {background:#f4f4f4;font-size:14px;}
.clear {clear:both;}
.full {width:1210px;min-width:1210px;margin:0 auto;}
.full-big {width:1340px;min-width:1340px;margin:0 auto;}
.img-full {display:block;width:100%;}
::-webkit-input-placeholder {color:#777;font-size:14px;}
:-moz-placeholder {/* Firefox 18- */color:#777;font-size:14px;}
::-moz-placeholder {/* Firefox 19+ */color:#777;font-size:14px;}
:-ms-input-placeholder {color:#777;font-size:14px;}
/* ====clear float====== *//*nav a:visited {color:rgb(65,65,65);}
aside a:visited {color:rgb(65,65,65);}
*/.fl {float:left;}
.fr {float:right;}
.clear:after {content:'';display:block;clear:both;}
/* reset */.pic img {display:none;}
em {font-style:normal}
li {list-style:none}
a {text-decoration:none;}
img {border:none;}
table {border-collapse:collapse;}
/*上传图片插件的样式*/.img-box {margin-top:40px;}
.img-box .up-p {margin-bottom:20px;font-size:16px;color:#555;}
.z_photo {padding:18px;border:2px dashed #E7E6E6;}
.z_photo .z_file {position:relative;}
.z_file .file {width:100%;height:100%;opacity:0;position:absolute;top:0px;left:0px;z-index:100;}
.z_photo .up-section {position:relative;margin-right:20px;margin-bottom:20px;}
.up-section .close-upimg {position:absolute;top:6px;right:8px;display:none;z-index:10;}
.up-section .up-span {display:block;width:100%;height:100%;visibility:hidden;position:absolute;top:0px;left:0px;z-index:9;background:rgba(0,0,0,.5);}
.up-section:hover {border:2px solid #f15134;}
.up-section:hover .close-upimg {display:block;}
.up-section:hover .up-span {visibility:visible;}
.z_photo .up-img {display:block;width:100%;height:100%;}
.loading {border:1px solid #D1D1D1;background:url(https://cs.m.xczhihui.com/xcview/images/shop/loading.gif) no-repeat center;}
.up-opcity {opacity:0;}
.img-name-p {display:none;}
.upimg-div .up-section {width:190px;height:180px;}
.img-box .upimg-div .z_file {width:190px;height:180px;}
.z_file .add-img {display:block;width:190px;height:180px;}
/*遮罩层样式*/.mask {z-index:1000;display:none;position:fixed;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,.4);}
.mask .mask-content {width:500px;position:absolute;top:50%;left:50%;margin-left:-250px;margin-top:-80px;background:white;height:160px;text-align:center;}
.mask .mask-content .del-p {color:#555;height:94px;line-height:94px;font-size:18px;border-bottom:1px solid #D1D1D1;}
.mask-content .check-p {height:66px;line-height:66px;position:absolute;bottom:0px;left:0px;width:100%;}
.mask-content .check-p span {width:49%;display:inline-block;text-align:center;color:#d4361d;font-size:18px;}
.check-p .del-com {border-right:1px solid #D1D1D1;}
</style>
</head>
<body>
<div class="img-box full">
<section class=" img-section">
<p class="up-p"><span class="up-span">上传图片（最多可以上传5张图片）</span></p>
<div class="z_photo upimg-div clear">
<section class="z_file fl">
<img src="https://cs.m.xczhihui.com/xcview/images/shop/uploading.png" class="add-img">
<input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple="">
</section>
</div>
</section>
</div>
<aside class="mask works-mask">
<div class="mask-content">
<p class="del-p ">您确定要删除图片吗？</p>
<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
</div>
</aside>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
var delParent;
var defaults = {
fileType: ["jpg","png","bmp","jpeg"], // 上传文件的类型
fileSize: 1024 * 1024 * 1 // 上传文件的大小 10M
};
/*点击图片的文本框*/
$(".file").change(function(){
var idFile = $(this).attr("id");
var file = document.getElementById(idFile);
var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
var fileList = file.files; //获取的图片文件
var input = $(this).parent();//文本框的父亲元素
var imgArr = [];
//遍历得到的图片文件
var numUp = imgContainer.find(".up-section").length;
var totalNum = numUp + fileList.length; //总的数量
if(fileList.length > 5 || totalNum > 5 ){
alert("上传图片数目不可以超过5个，请重新选择"); //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
}
else if(numUp < 5){
fileList = validateUp(fileList);
for(var i = 0;i<fileList.length;i++){
var imgUrl = window.URL.createObjectURL(fileList[i]);
imgArr.push(imgUrl);
var $section = $("<section class='up-section fl loading'>");
imgContainer.prepend($section);
var $span = $("<span class='up-span'>");
$span.appendTo($section);
var $img0 = $("<img class='close-upimg'>").on("click",function(event){
event.preventDefault();
event.stopPropagation();
$(".works-mask").show();
delParent = $(this).parent();
});
$img0.attr("src","https://cs.m.xczhihui.com/xcview/images/shop/close.png").appendTo($section);
var $img = $("<img class='up-img up-opcity'>");
$img.attr("src",imgArr[i]);
$img.appendTo($section);
var $p = $("<p class='img-name-p'>");
$p.html(fileList[i].name).appendTo($section);
var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
$input.appendTo($section);
var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
$input2.appendTo($section);
}
}
setTimeout(function(){
$(".up-section").removeClass("loading");
$(".up-img").removeClass("up-opcity");
},450);
numUp = imgContainer.find(".up-section").length;
if(numUp >= 5){
$(this).parent().hide();
}
});
$(".z_photo").delegate(".close-upimg","click",function(){
$(".works-mask").show();
delParent = $(this).parent();
});
$(".wsdel-ok").click(function(){
$(".works-mask").hide();
var numUp = delParent.siblings().length;
if(numUp < 6){
delParent.parent().find(".z_file").show();
}
delParent.remove();
});
$(".wsdel-no").click(function(){
$(".works-mask").hide();
});
function validateUp(files){
var arrFiles = [];//替换的文件数组
for(var i = 0, file; file = files[i]; i++){
//获取文件上传的后缀名
var newStr = file.name.split("").reverse().join("");
if(newStr.split(".")[0] != null){
var type = newStr.split(".")[0].split("").reverse().join("");
console.log(type+"===type===");
if(jQuery.inArray(type, defaults.fileType) > -1){
// 类型符合，可以上传
if (file.size >= defaults.fileSize) {
alert(file.size);
alert('您这个"'+ file.name +'"文件大小过大');
} else {
// 在这里需要判断当前所有文件中
arrFiles.push(file);
}
}else{
alert('您这个"'+ file.name +'"上传类型不符合');
}
}else{
alert('您这个"'+ file.name +'"没有类型, 无法识别');
}
}
return arrFiles;
}
});
</script>
