jQuery 图片上传插件----上传按钮 以及动态增删图片预览
2018-01-15 20:45
726 查看
http://www.lanrenzhijia.com/js/3873.html
<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="up-section fl">
<span class="up-span"></span>
<img src="img/buyerCenter/a7.png" class="close-upimg">
<img src="img/buyerCenter/3c.png" class="type-upimg" alt="添加标签">
<img src="img/test2.jpg" class="up-img">
//添加的图片预览区域
<p class="img-namep"></p>
<input id="taglocation" name="taglocation" value="" type="hidden">
<input id="tags" name="tags" value="" type="hidden">
</section>-->
<section class="z_file fl">
<img src="img/a11.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>
$(function(){
var delParent;
var defaults = {
fileType : ["jpg","png","bmp","jpeg"], // 上传文件的类型
fileSize : 1024 * 1024 * 10 // 上传文件的大小 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); //在添加按钮的前面添加预览图片区域, append($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","img/a7.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;
}
})
/*上传图片插件的样式*/
.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;
/*padding: 18px;*/
}
.z_photo .z_file{
position: relative;
}
.z_file .file{ //设置添加图片按钮的css
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(../img/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;
}
<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="up-section fl">
<span class="up-span"></span>
<img src="img/buyerCenter/a7.png" class="close-upimg">
<img src="img/buyerCenter/3c.png" class="type-upimg" alt="添加标签">
<img src="img/test2.jpg" class="up-img">
//添加的图片预览区域
<p class="img-namep"></p>
<input id="taglocation" name="taglocation" value="" type="hidden">
<input id="tags" name="tags" value="" type="hidden">
</section>-->
<section class="z_file fl">
<img src="img/a11.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>
$(function(){
var delParent;
var defaults = {
fileType : ["jpg","png","bmp","jpeg"], // 上传文件的类型
fileSize : 1024 * 1024 * 10 // 上传文件的大小 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); //在添加按钮的前面添加预览图片区域, append($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","img/a7.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;
}
})
/*上传图片插件的样式*/
.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;
/*padding: 18px;*/
}
.z_photo .z_file{
position: relative;
}
.z_file .file{ //设置添加图片按钮的css
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(../img/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;
}
相关文章推荐
- jquery控制上传文件格式、大小以及图片预览功能
- 基于JQuery的图片上传预览插件(图片预览、过滤文件类型、限制图片大小、图片显示后回调)
- jquery.uploadify插件实现图片上传和预览效果
- jQuery 的上传图片预览插件
- html5以及jQuery实现本地图片上传前的预览
- jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
- JQuery插件:图片上传本地预览插件,改进案例一则。
- JQUERY 图片上传预览插件
- jquery.uploadify插件实现图片上传和预览效果
- java图片上传并预览,前台用jQuery插件AjaxFileUpload,后台用FileUtils.copyFile.
- jQuery插件imgPreviewQs实现上传图片预览
- [置顶] input file上传图片预览(查看图片大小,类型,名字)------------------------------自己动手写jQuery插件
- 使用SpringMVC配合jQuery文件上传插件ssi-uploader实现多图片可预览上传
- jquery上传图片本地预览插件V1.2
- jquery图片上传预览插件uploadView
- jQuery插件imgPreviewQs实现上传图片预览
- html5以及jQuery实现本地图片上传前的预览
- jquery插件:图片上传按比例预览
- jquery实现页面无刷新动态上传图片预览功能