上传多张图片插件

最新推荐文章于 2021-06-04 08:16:14 发布

小范&范范

最新推荐文章于 2021-06-04 08:16:14 发布

阅读量452

点赞数

本文链接：https://blog.csdn.net/qq_23953969/article/details/100038111

版权

上传多张图片插件

1.HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>上传多张图片</title>
<script src="../js/jquery.min.js"></script>
<script src="../js/public.js"></script>

<link href="../css/bianji.css" rel="stylesheet"/>

<!--上传图片-->
<script src="../js/upload.js"></script>

</head>

<body>
<div class="bianji_contBox_cont" style="height: auto;">
	<span>商户图片：</span>
	<div class="bianji_contBox_cont_shtpBox">
		<div class="bianji_contBox_cont_shtpBox_imgBox">
			
		</div>
        <div class="z_file">
            <input class="z_file_bnt" type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('bianji_contBox_cont_shtpBox_imgBox','z_file');" />
        </div>
        <!--遮罩层-->
        <div class="z_mask">
            <!--弹出框-->
            <div class="z_alert">
                <p>确定要删除这张图片吗？</p>
                <p>
                	<span class="z_cancel">取消</span>
                    <span class="z_sure">确定</span>
                </p>
            </div>
        </div>
	</div>
	<div class="bianji_contBox_cont_tishi">最多5张</div>
</div>
</body>
<!--多张图片上传-->
<script type="text/javascript">
function imgChange(obj1, obj2) {
    //获取点击的文本框
    var file = document.getElementById("file");
    //存放图片的父级元素
    var imgContainer = document.getElementsByClassName(obj1)[0];
    //获取的图片文件
    var fileList = file.files;
    //文本框的父级元素
    var input = document.getElementsByClassName(obj2)[0];
    var imgArr = [];
    //遍历获取到得图片文件
    for (var i = 0; i < fileList.length ; i++) {
        var imgUrl = window.URL.createObjectURL(file.files[i]);
        imgArr.push(imgUrl);
        var img = document.createElement("img");
        img.setAttribute("src", imgArr[i]);
        var imgAdd = document.createElement("div");
        imgAdd.setAttribute("class", "z_addImg");
        imgAdd.appendChild(img);
        imgContainer.appendChild(imgAdd);
    };
    if($('.z_addImg img').length > 4){
		$(".z_file").hide();
	}else{
		$(".z_file").show();
	}
    imgRemove();
};
function imgRemove() {
    var imgList = document.getElementsByClassName("z_addImg");
    var mask = document.getElementsByClassName("z_mask")[0];
    var cancel = document.getElementsByClassName("z_cancel")[0];
    var sure = document.getElementsByClassName("z_sure")[0];
    for (var j = 0; j < imgList.length; j++) {
        imgList[j].index = j;
        imgList[j].onclick = function() {
            var t = this;
            mask.style.display = "block";
            cancel.onclick = function() {
                mask.style.display = "none";
            };
            sure.onclick = function() {
                mask.style.display = "none";
                t.style.display = "none";
                t.remove();
                $(".z_file").show();
            };
        }
    };
};
</script>


</html>

2.CSS

@charset "utf-8";
 .bianji_contBox_cont{
     width: calc(100% - 0.68rem);
     height: 0.88rem;
     float: left;
     padding: 0 0.34rem;
     border-bottom: #eee 0.02rem solid;
     overflow: hidden;
}
 .bianji_contBox_cont span{
     width: 1.56rem;
     height: 0.86rem;
     float: left;
     overflow: hidden;
     line-height: 0.86rem;
     font-size: 0.3rem;
     color: #0d0d0d;
}
 .bianji_contBox_cont_shtpBox{
     width: 100%;
     float: left;
     overflow: hidden;
}
 .bianji_contBox_cont_tishi{
     text-align: right;
     height: 0.5rem;
     overflow: hidden;
     border: 0;
     font-size: 0.26rem;
     color: #bdbdbd;
     width: 100%;
     float: left;
}
 .bianji_bnt{
     width: 5.94rem;
     height: 0.82rem;
     overflow: hidden;
     border: 0;
     margin: 0.36rem calc((100% - 5.94rem) / 2);
     font-size: 0.36rem;
     color: #fff;
     background-color: #0c38f7;
     border-radius: 0.82rem;
}
 .bianji_contBox_cont_shtxBox_img{
     width: 1.44rem;
     height: 1.44rem;
     overflow: hidden;
     float: left;
}
/*多张图片上传样式开始*/
 .z_photo img {
     width: 1.44rem;
     height: 1.44rem;
}
 .z_addImg {
     float: left;
     margin-right: 0.24rem;
     margin-bottom: 0.16rem;
}
 .z_addImg img{
     width: 1.44rem;
     height: 1.44rem;
     float: left;
}
 .z_file {
     width: 1.44rem;
     height: 1.44rem;
     background: url(../image/dianpuguanli/shtp_addImg.png) no-repeat;
     background-size: 100% 100%;
     float: left;
     margin-right: 0.24rem;
     margin-bottom: 0.16rem;
}
 .z_file input::-webkit-file-upload-button {
     width: 1.44rem;
     height: 1.44rem;
     border: none;
     position: absolute;
     outline: 0;
     opacity: 0;
}
 .z_file input#file {
     display: block;
     width: auto;
     border: 0;
     vertical-align: middle;
}
/*遮罩层*/
 .z_mask {
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, .5);
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
     display: none;
}
 .z_alert {
     width: 4.8rem;
     height: 2.21rem;
     border-radius: 0.1rem;
     background: #fff;
     font-size: 0.28rem;
     text-align: center;
     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -2.4rem;
     margin-top: -1.1rem;
}
 .z_alert p:nth-child(1) {
     height: 1.5rem;
     line-height: 1.5rem;
     font-size: 0.36rem;
     margin: 0;
}
 .z_alert p:nth-child(2) span {
     display: inline-block;
     width: 49%;
     height: 0.7rem;
     line-height: 0.7rem;
     float: left;
     border-top: 0.02rem solid #ddd;
}
 .z_cancel {
     border-right: 0.02rem solid #ddd;
}
 .z_alert p{
 	margin: 0;
 }
/*多张图片上传样式结束*/

3.upload.JS

function DragImgUpload(id,options) {
    this.me = $(id);
    var defaultOpt = {
        boxWidth:'1.44rem',
        boxHeight:'auto'
    }
    this.preview = $('<div id="preview"><img src="../../image/dianpuguanli/shtx_addImg.png" class="img-responsive"  style="width: 1.44rem;height: 1.44rem;" alt="" title=""> </div>');
    this.opts=$.extend(true, defaultOpt,{
    }, options);
    this.init();
    this.callback = this.opts.callback;
}

//定义原型方法
DragImgUpload.prototype = {
    init:function () {
        this.me.append(this.preview);
        this.me.append(this.fileupload);
        this.cssInit();
        this.eventClickInit();
    },
    cssInit:function () {
        this.me.css({
            'width':this.opts.boxWidth,
            'height':this.opts.boxHeight,
        })
        this.preview.css({
            'height':'1.44rem',
            'width':'1.44rem',
            'overflow':'hidden'
        })

    },
    onDragover:function (e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    },
    onDrop:function (e) {
        var self = this;
        e.stopPropagation();
        e.preventDefault();
        var fileList = e.dataTransfer.files; //获取文件对象
        // do something upload
        if(fileList.length == 0){
            return false;
        }
        //检测文件是不是图片
        if(fileList[0].type.indexOf('image') === -1){
            alert("您拖的不是图片！");
            return false;
        }

        //拖拉图片到浏览器，可以实现预览功能
        var img = window.URL.createObjectURL(fileList[0]);
        var filename = fileList[0].name; //图片名称
        var filesize = Math.floor((fileList[0].size)/1024);
        if(filesize>500){
            alert("上传大小不能超过500K.");
            return false;
        }

        self.me.find("img").attr("src",img);
        self.me.find("img").attr("title",filename);
        if(this.callback){
            this.callback(fileList);
        }
    },
    eventClickInit:function () {
        var self = this;
        this.me.unbind().click(function () {
            self.createImageUploadDialog();
        })
        var dp = this.me[0];
        dp.addEventListener('dragover', function(e) {
            self.onDragover(e);
        });
        dp.addEventListener("drop", function(e) {
            self.onDrop(e);
        });


    },
    onChangeUploadFile:function () {
        var fileInput = this.fileInput;
        var files = fileInput.files;
        var file = files[0];
        var img = window.URL.createObjectURL(file);
        var filename = file.name;
        this.me.find("img").attr("src",img);
        this.me.find("img").attr("title",filename);
        if(this.callback){
            this.callback(files);
        }
    },
    createImageUploadDialog:function () {
        var fileInput = this.fileInput;
        if (!fileInput) {
            //创建临时input元素
            fileInput = document.createElement('input');
            //设置input type为文件类型
            fileInput.type = 'file';
            //设置文件name
            fileInput.name = 'ime-images';
            //允许上传多个文件
            fileInput.multiple = true;
            fileInput.onchange  = this.onChangeUploadFile.bind(this);
            this.fileInput = fileInput;
        }
        //触发点击input点击事件，弹出选择文件对话框
        fileInput.click();
    }




}