上传多张图片插件

上传多张图片插件

1.HTML

	商户图片：
	

		

			
		
        

            
        
        
        

            
            

                
确定要删除这张图片吗？
                

                	取消
                    确定
                
            
        
	
	
最多5张

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 = $('
 
');
    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();
    }




}