js封面图片上传插件

/**
 * 上传插件
 * @param {Object} op
 */
function UploadCover(op){
	this.cont = document.getElementsByClassName(op.ele);
	this.upSrc = op.src;
	this.formparam = op.formdata;
	this.init();
}

UploadCover.prototype = {
	init: function(){
		var _this = this;
		for(var i = 0,len = this.cont.length; i < len; i++){
			var listEle = this.cont[i],
				dataSrc = listEle.getAttribute('data-src');
			listEle.innerHTML = this.renderHtml(dataSrc);
		}
		$('.J_fileImage').on("change", function(e){
			_this.upload(e,this);
		})
		 /**
	     * 关闭图片
	     */
	    $(document).on('click','.closeImg',function(){
	    	var $par = $(this).parents('.up-img-list');
	    	$par.find('img').attr({
	    		'data-src':'',
	    		'src': ''
	    	});
	    	$par.hide().siblings('.uploadBtn').show();
	    });
	},
	renderHtml: function(src){
		var flag = src ? "display:block" : "display:none",
			flag1 = !src ? "display:block" : "display:none";
		return '<div class="clearx up-img-list" style="'+flag+'">'+
	                '<em class="close closeImg"></em>'+
	                '<div class="up-progress-cont"><p class="progress-text"></p><p class="progress j-up-progress"></p><div class="success-dialog"><em></em><p>上传成功</p></div></div>'+
	                '<img src="'+src+'" data-src="'+src+'" alt="青果双师" class="ques-uu" />'+
	            '</div>'+
	            '<div class="uploadBtn" style="'+flag1+'">'+
                    '<form enctype="multipart/form-data" class="left">'+
                        '<div class="text text_c">'+
                        	'<p class="p1"></p>'+
                        	'<p>点击此处添加封面</p>'+
                        '</div>'+
                        '<input class="file J_fileImage" name="videocover" type="file">'+
                    '</form>'+
                '</div>'+
				'<p class="tipdesc" style="padding-left: 0;">请上传尺寸为：380*230的封面图</p>';
	},
	upload: function(e,context){
		var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files,
	        $that    = $(context),
	        formData = new FormData(),
	        file = files[0];
        if (url) {
            src = url.createObjectURL(file);
        } else {
            src = e.target.result;
        }
        $that.parents('.uploadBtn').hide();
        var coverDom = $that.parents('.uploadBtn').siblings('.up-img-list'),
        	$upProgress = coverDom.find('.up-progress-cont'),
        	$progressText = coverDom.find('.progress-text');
        coverDom.show().find('.ques-uu').attr('src',src);
        formData.append(this.formparam, file);
        $upProgress.show();
	    //重置数据
	    $that.val('');
	    //上传
	    var posturl = this.upSrc;
	     $.ajax({
	         url:posturl,
	         type: "POST",
	         cache: false,
	         data: formData,
	         processData: false,
	         contentType:false,
	         xhr: function() { //用以显示上传进度 
	             var xhr = $.ajaxSettings.xhr();
	             if (xhr.upload) {
	                 xhr.upload.addEventListener('progress', function(e) {
	                     var count = Math.floor(e.loaded/e.total*100)+'%';
	                     $upProgress.height(count);
	                     $progressText.html('上传中'+count);
	                 }, false);
	             }
	             return xhr;
	         },
	         success: function (result) {
	             var data = JSON.parse(result);
	             coverDom.find('.success-dialog').show();
	             if(data.code == '10000'){
	                var filepath = data.data.filepath;
	                coverDom.find('.ques-uu').attr('data-src',filepath)
	             }else{
	             	coverDom.find('.success-dialog').find('p').html(data.desc);
	             	setTimeout(function(){
		             	coverDom.hide();
	    				$that.parents('.uploadBtn').show();
		             },300)
	             }
	             setTimeout(function(){
	             	$upProgress.hide();
	             },300)
	         }
	     });
	}
}

.commonUpCover .uploadBtn{width: 380px;height: 230px;border: 1px dashed #999;}
.commonUpCover .uploadBtn1{width:148px;height: 264.8px;}
.commonUpCover .uploadBtn form{width: 100%;font-size: 14px;color: #555;}
.commonUpCover .uploadBtn:hover{background: #f5f5f5;}
.commonUpCover .uploadBtn .p1{background: url(../i/upCover.png);width: 40px;height: 36px;margin: 80px auto 10px;}
.commonUpCover .up-img-list{position: relative;width: 380px;height: 230px;}
.commonUpCover .up-img-list .up-progress-cont{position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;}
.commonUpCover .up-img-list img{width: 100%;height: 100%;}
.commonUpCover .up-img-list .progress{background: rgba(0,0,0,.5);width: 100%;height:100%;position: absolute;bottom: 0;left: 0;}
.commonUpCover .up-img-list .progress-text{position: absolute;left: 0;top: 0;display: flex;justify-content: center;align-items: center;z-index: 99;width: 100%;height: 100%;color: #fff;font-size: 14px;}
.commonUpCover .up-img-list .success-dialog{display: none;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 140px;height: 90px;background:rgba(0,0,0,.6);color: #fff;text-align: center;border-radius: 3px;}
.commonUpCover .up-img-list .success-dialog em{display: block;width: 24px;height: 24px;background: url(https://jicvps.qingguo.com/i/createEvent/up-tip.png);margin: 20px auto 10px;border-radius: 24px;}
.commonUpCover .close{position: absolute;right: 0;top: 0;width: 30px;height: 30px;background: url(../officialLiveManage/i/videoClose.png);cursor: pointer;z-index: 999;}
.add_new_files .cancel{background: #eaeaea;color: #8f8f8f;}
.add_new_files .cancel:hover{color: #000;}
.commonUpCover .tipdesc{color:#ff3333;}

<div class="left commonUpCover" data-src="" style="margin-left: 7px;">
							
</div>

var upcover = new UploadCover({
		ele: "commonUpCover",
		src: 'xxxxxx.php',
		formdata: 'xxxxx'
})