接着上一部，这个部分主要是用js如何具体实现功能，好了废话不多说，直接上代码
function TaoUpload(obj){
/**
* 配置额外参数 skin
*/
var uSkin=obj["skin"]?obj["skin"]:"#ccc";
var _this =this;
this.pDiv =$("#"+obj['uId']);//自定义id
this.uplaodHeader(obj['uId']);//固定节点
this.uplaodModal(obj['uId']); //添加弹出层
this.uplaodEditModal(obj['uId']);//修改弹出层
var DragEl =null; //存储li对象
this.uploadSkins(obj["uId"],uSkin); //皮肤扩展方法
/**
* 添加弹层变量
* @type {*}
*/
var newLi = $("#"+obj['uId']+'_img_uplaod_id');
var addModal =$("#"+obj['uId']+'_boxTanceng'); //添加的弹层
var uploadfileadd =$("#"+obj['uId']+'_file_upladd_input_hides');//上传隐藏file（添加）
var uploadImagesSrc =$("#"+obj['uId']+'_tupian_upload_src_images');//上传img（添加）
var uploadSure =$("#"+obj['uId']+'_queding_upload_btn_Save');//确定上传 （添加）
var uploadHref =$("#"+obj['uId']+'_input_upload_hrefs');//弹层连接（添加）
var uploadClose =$("#"+obj['uId']+'_quxiao_upload_btn_noSave');///取消按钮（添加）
var uploadAddUL = $("#"+obj['uId']+'_ul_Upload_nav'); //li父级ul
/**
* 编辑弹层变量
*/
var editModal =$("#"+obj['uId']+'_boxTanceng_bian'); //编辑弹层
var editfileadd =$("#"+obj['uId']+'_file_upladd_input_hides_bian');//上传隐藏file（编辑）
var EditImagesSrc =$("#"+obj['uId']+'_tupian_upload_src_images_bian');//上传img（编辑）
var EditSure =$("#"+obj['uId']+'_queding_upload_btn_Save_bian');//确定上传 （编辑）
var editHref =$("#"+obj['uId']+'_input_upload_hrefs_bian');//弹层连接（编辑）
var editClose =$("#"+obj['uId']+'_quxiao_upload_btn_noSave_bian');///取消按钮（编辑）
/* //事件区域
$("#"+obj['uId']+'_a_Upload_btn_add').on("click",function(){
alert(0);
});*/
//弹层
newLi.on("click",function(){
$(".boxTanceng").hide();
uploadImagesSrc.attr("src","image/uploadsPic.png");
uploadHref.val("");
addModal.fadeIn();
});
//选择图片上传(添加)
uploadfileadd.on("change",function(){
var absoulteUrl =$(this).val(); //获取绝对路径
var sImg =_this.getObjectURL(this.files[0]);
uploadImagesSrc.attr("src",sImg);
addModal.attr("data-absoulte",absoulteUrl);
});
//点击添加上传
var num_upload =-1;
uploadSure.on("click",function(){
//验证判断
if(!_this.checkForm(uploadHref)){
return;
}
num_upload++
if(uploadAddUL.find(".li_for_Five").length>=4) {
newLi.parent().hide();
}
uploadAddUL.find(".Upload_nav_li_class")
.before("<li data-src='" + addModal.attr('data-absoulte') + "'" +
" data-href='" + uploadHref.val() + "' " +
"style='background:url(" + uploadImagesSrc.attr('src') + "); background-size: cover'" +
" class='li_for_Five' data-index='" + num_upload + "' draggable='true'>" +
"<div class='zhezhao_upload_div'>删除</div></li>");
//拖拽代码实现 =>所有li绑定拖拽事件
var cols =uploadAddUL.find(".li_for_Five");
[].forEach.call(cols,function(item){
item.addEventListener("dragstart",dragStartUpload,false);
item.addEventListener("dragenter",dragEnterUpload,false);
item.addEventListener("dragleave",dragLeaveUpload,false);
item.addEventListener("dragover",dragMove,false);
item.addEventListener("drop",dropDrag,false);
item.addEventListener("dragend",DragEnd,false);
});
addModal.fadeOut();
});
//点击取消弹窗消失（添加）
uploadClose.on("click",function(){
addModal.fadeOut();
});
//寻找创建的节点
this.pDiv.on("click",function(ev){
var target =$(ev.target);
if(target.closest("li.li_for_Five").length==1){
editModal.fadeIn();
editModal.attr("data-index",target.attr("data-index"));
editModal.attr("data-absoulte",target.attr("data-src"));
var editSrc =target.css("backgroundImage").split('"')[1];
EditImagesSrc.attr("src",editSrc);
editHref.val(target.attr("data-href"));
}
if(target.closest("div.zhezhao_upload_div").length==1){
editModal.hide();
if(confirm("您确定删除吗")){
target.parent().remove();
newLi.parent().fadeIn();
}
}
});
//编辑框内选择图片
editfileadd.on("change",function(){
var absoulteUrl =$(this).val(); //获取绝对路径
var sImg =_this.getObjectURL(this.files[0]);
EditImagesSrc.attr("src",sImg);
editModal.attr("data-absoulte",absoulteUrl);
});
//编辑确定，改变当前li图片
EditSure.on("click",function(){
if(!_this.checkForm(editHref)){
return;
}
var index =editModal.attr("data-index");
var dataSrc =editModal.attr("data-absoulte");
var srcEdit = EditImagesSrc.attr("src")
uploadAddUL.find(".li_for_Five[data-index="+index+"]").css("backgroundImage","url("+srcEdit+")");
uploadAddUL.find(".li_for_Five[data-index="+index+"]").attr("data-href",editHref.val());
uploadAddUL.find(".li_for_Five[data-index="+index+"]").attr("data-src",dataSrc);
editModal.fadeOut();
});
//编辑区域取消
editClose.on("click",function(){
editModal.fadeOut();
});
//开始拖拽
function dragStartUpload(e){
e.target.style.opacity='0.5';
DragEl =this;
//数据数组 => 数据传递
var arr =[$(this).attr("data-src"),$(this).attr("data-index"),$(this).attr("data-href"),
this.style.backgroundImage];
e.dataTransfer.setData("text/html",arr);
}
//拖拽进入事件函数
function dragEnterUpload(e){
e.target.style.opacity='0.5';
}
//拖拽离开
function dragLeaveUpload(e){
e.target.style.opacity='1';
}
//拖拽移动
function dragMove(e){
e.preventDefault();
return false;
}
//拖拽进入区域
function dropDrag(e){
if(DragEl!=this){
DragEl.style.backgroundImage=this.style.backgroundImage;
$(DragEl).attr("data-index",$(this).attr("data-index"));
$(DragEl).attr("data-src",$(this).attr("data-src"));
$(DragEl).attr("data-href",$(this).attr("data-href"));
//数据接收，仅接收字符串
var httml =e.dataTransfer.getData("text/html");
//背景图调换
this.style.backgroundImage=httml.split(",")[3];
//索引值调换
$(this).attr("data-index",httml.split(",")[1]);
//自定义src调换
$(this).attr("data-src",httml.split(",")[0]);
//自定义href调换
$(this).attr("data-href",httml.split(",")[2])
}
return false;
}
//拖拽结束
function DragEnd(){
var cols =uploadAddUL.find(".li_for_Five");
[].forEach.call(cols,function(item){
item.style.opacity='1';
});
}
}
TaoUpload.prototype.uplaodHeader=function(id){
this.pDiv.append('<ul class="ul_Upload_nav" id='+id+'_ul_Upload_nav>'+
'<li class="Upload_nav_li_class">'+
''+
' </li>'+
' </ul>'
);
/* '<a href="javascript:;" class="a_Upload_btn_add" id='+id+'_a_Upload_btn_add >'+'保存'+
'</a>'*/
}
/**
* 添加弹出层
* @param id
*/
TaoUpload.prototype.uplaodModal=function(id){
$("body").append('<div class="boxTanceng" data-absoulte="" id='+id+'_boxTanceng>'+
'<div class="boxTanceng_title" >'+
'添加图片上传'+
'</div>'+
'<div class="boxTanceng_body">'+
'<ul>'+
'<span class="tupian_upload_src">图片：</span>'+
'<li style="margin-bottom: 10px; position: relative;">'+
' '+
' <input type="file" class="file_upladd_input_hides" accept="image/gif,image/jpeg,image/png" id='+id+'_file_upladd_input_hides />'+
'</li>'+
'<div style="clear: both"></div>'+
'<span class="tupian_upload_href">图片地址：</span>'+
' <li >'+
' <input type="text" class="input_upload_hrefs" id='+id+'_input_upload_hrefs />'+
' </li>'+
'</ul>'+
'</div>'+
'<div class="boxTanceng_footer">'+
'<a href="javascript:;" id='+id+'_quxiao_upload_btn_noSave'+' class="upload_btn quxiao_upload_btn_noSave">取消'+'</a>'+
'<a href="javascript:;" class="upload_btn " id='+id+'_queding_upload_btn_Save'+'>添加</a>'+
'</div>'+
'</div>');
}
/**
* 修改弹出层
* @param id
*/
TaoUpload.prototype.uplaodEditModal=function(id){
$("body").append('<div class="boxTanceng" data-index="" data-absoulte="" id='+id+'_boxTanceng_bian>'+
'<div class="boxTanceng_title" >'+
'编辑图片上传'+
'</div>'+
'<div class="boxTanceng_body">'+
'<ul>'+
'<span class="tupian_upload_src">图片：</span>'+
'<li style="margin-bottom: 10px; position: relative;">'+
' '+
' <input type="file" class="file_upladd_input_hides" accept="image/gif,image/jpeg,image/png" id='+id+'_file_upladd_input_hides_bian />'+
'</li>'+
'<div style="clear: both"></div>'+
'<span class="tupian_upload_href">图片地址：</span>'+
' <li >'+
' <input type="text" class="input_upload_hrefs" id='+id+'_input_upload_hrefs_bian />'+
' </li>'+
'</ul>'+
'</div>'+
'<div class="boxTanceng_footer">'+
'<a href="javascript:;" id='+id+'_quxiao_upload_btn_noSave_bian'+' class="upload_btn quxiao_upload_btn_noSave">取消'+'</a>'+
'<a href="javascript:;" class="upload_btn " id='+id+'_queding_upload_btn_Save_bian'+'>编辑</a>'+
'</div>'+
'</div>');
}
TaoUpload.prototype.getObjectURL=function(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
TaoUpload.prototype.checkForm=function(id){
if(!id.val()){
alert("请填写链接！");
return false;
}
return true;
}
TaoUpload.prototype.uploadSkins=function(id,skin){
//添加弹窗
var TTbox = $("#"+id+"_boxTanceng");
TTbox.css("borderColor",skin)
TTbox.find(".boxTanceng_title").css({
backgroundColor:skin
});
$("#"+id+"_input_upload_hrefs").css("borderColor",skin);
$("#"+id+"_queding_upload_btn_Save").css("backgroundColor",skin);
//编辑弹窗
var TTbox_bian = $("#"+id+"_boxTanceng_bian");
TTbox_bian.css("borderColor",skin)
TTbox_bian.find(".boxTanceng_title").css({
backgroundColor:skin
});
$("#"+id+"_input_upload_hrefs_bian").css("borderColor",skin);
$("#"+id+"_queding_upload_btn_Save_bian").css("backgroundColor",skin);
}
//插件入口函数
function TaoTaoUpload(json){
new TaoUpload(json);
}
总结
代码在很多地方有些问题，比如，工程中插件带的图片是否可以配置，和图片的路径是否需要配置。插件内部，其实通过简单的三目运算符来判断是否有值的，应该借用一下jquery的extend方法。不过整体还是很好。可以定制符合工程的ui风格，可以为后台提供一个json数据，（上文中提炼了这个方法）
网友评论