没事写了前端控件
支持选择多张图片
拖拽排序
缺点就是需要用base64上传,本来是想用二进制数据上传的,因为base64上传,如果是大图片的话,会很慢,且有些服务器是不支持传很长的字符的
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#container {
width:100%;
white-space:nowrap;
padding:0px;
}
.item{
border-style:solid;
border-width:1px;
border-color:#000;
width:200px;
height:200px;
float:left;
}
.item img{
width:100px;
height:100px;
}
.hide{
display:none;
}
.btn{
border:0;
background-color:none;
}
.maskDiv{position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
</style>
<script>
//定义控件
var srcdiv=null;//拖动的源
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev,divdom){
srcdiv=divdom;
ev.dataTransfer.setData("text/html",divdom.innerHTML);
}
function drop(ev,divdom){
ev.preventDefault();
if(srcdiv!=divdom){
srcdiv.innerHTML=divdom.innerHTML;
divdom.innerHTML=ev.dataTransfer.getData("text/html");
}
}
var currentReViewImgIndex=0;
//预览图片
function reViewImgGroup(widgetId,uuid,el){
$("#mask"+widgetId).removeClass("hide");
var url=$("#img"+uuid).attr("src");
//console.info($("#img"+uuid));
$("#reviewImg"+widgetId).attr("src",url);
//计算出当前是第几张图片
var item=$(el).parent().parent();
//console.info(item);
//var itemList=$("#"+widgetId).find(".item");
var itemList=$(".item");
for(var i=0;i<itemList.length;i++){
//console.info($(itemList[i]));
var img=$(itemList[i]).find("img");
//console.info($(img).attr("id"));
if("img"+uuid==$(img).attr("id")){
currentReViewImgIndex=i;
console.info(currentReViewImgIndex);
break;
}
}
}
//上一张图片
function preImg(widgetId){
var itemList=$(".item");
//console.info(currentReViewImgIndex);
var _index=currentReViewImgIndex-1;
if(_index<0){
_index=0;
}
var item=itemList[_index];
//拿出该位置的图片
var img=$(item).find("img");
var url=$(img).attr("src");
$("#reviewImg"+widgetId).attr("src",url);
currentReViewImgIndex=_index;
}
//下一张图片
function nextImg(widgetId){
var itemList=$(".item");
var len=itemList.length-2;
//console.info(currentReViewImgIndex);
var _index=currentReViewImgIndex+1;
//console.info("_index="+_index);
if(_index>len){
//console.info(1111111);
_index=len;
}
var item=itemList[_index];
//拿出该位置的图片
var img=$(item).find("img");
var url=$(img).attr("src");
$("#reviewImg"+widgetId).attr("src",url);
currentReViewImgIndex=_index;
}
function deleteImg(el,imgId,deleteServer){
var item=$(el).parent().parent();
$(item).remove();
if(imgId&&deleteServer){
//执行删除图片动作
console.info(deleteServer+"删除图片["+imgId+"]");
}
}
(function(){
var _widget={
_id:null,
_el:null,
_config:null,
_srcItem:null,//移动的源
_init:function(options){
var self=this;
self._config=options||{};
self._render();
self._bind();
},
_render:function(){
var self=this;
var c=self._config;
//在最开始加入一个空的格子,即新增图片按钮
//最后再加一个空的
var _html='<div id="lastItem'+self._id+'" class="item">'
+' <p class="itemName"></p>'
+' <p style="text-align:center;"><a id="addBtn'+self._id+'" style="text-decoration:none;font-size:20px;" href="javascript:void(0);">上传图片</a></p>'
+' <p class="hide"><input id="fileEl'+self._id+'" type="file" multiple /></p>'
+'</div>';
//预览图片层
_html+='<div id="mask'+self._id+'" class="maskDiv hide">'
+' <div style="width: 60%;height: 50%;background-color: white;margin:210px;">'
+' <div style="float:left;"><a href="javascript:preImg(\''+self._id+'\');">上一张</a></div>'
+' <img id="reviewImg'+self._id+'" style="float:left;height:100%;width:auto;" src="" />'
+' <span style="float:left;"><a href="javascript:nextImg(\''+self._id+'\');">下一张</a></span>'
+' </div>'
+'</div>';
$(self._el).html(_html);
if(c.data){
self.loadData(c.data);
}
},
_bind:function(){
var self=this;
var c=self._config;
//新增按钮点击事件
$("#addBtn"+self._id).click(function(){
//触发文件域点击事件
$("#fileEl"+self._id).click();
});
//文件域改变事件
$("#fileEl"+self._id).change(function(e1){
if(!$(this).val()||$(this).val()==""){
return;
}
var fileArr=e1.currentTarget.files;
for(var i=0;i<fileArr.length;i++){
var file=fileArr[i];
var fileName=file.name;
(function(imgName){
var reader=new FileReader();
reader.readAsDataURL(file);
//读取文件过程方法
reader.onloadstart=function(e){
console.log("开始读取....");
}
reader.onprogress=function(e){
console.log("正在读取中....");
}
reader.onabort=function (e){
console.log("中断读取....");
}
reader.onerror=function (e){
console.log("读取异常....");
}
reader.onload=function(e){
console.log("成功读取....");
var imgMsg={
name:imgName,//获取文件名
base64:this.result//reader.readAsDataURL方法执行完后,base64数据储存在reader.result里
}
var _uuid=Math.random()+"";
_uuid=_uuid.replace(".","");
//创建显示域
var _html='<div class="item" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">'
+' <p id="fileName'+_uuid+'" class="itemName">'+imgName+'</p>'
+' <p><a href="javascript:void(0);"><img id="img'+_uuid+'" class="itemUrl" style="width:100%;" src="" /></a></p>'
//+' <p><input id="'+_uuid+'" onchange="uploadFile(this,\''+_uuid+'\',\''+uploadServer+'\')" type="file" /></p>'
+' <p><button class="btn" type="button" onclick="reViewImgGroup(\''+self._id+'\',\''+_uuid+'\',this)">预览</button> <button class="btn" type="button" onclick="deleteImg(this)">删除</button></p>'
+'</div>';
$("#lastItem"+self._id).before(_html);
//模拟上传
var c=0;
var _task=setInterval(function(){
c++;
if(c==6){
clearInterval(_task);
$("#img"+_uuid).attr("src",imgMsg.base64);
}else{
var _text=$("#fileName"+_uuid).text();
$("#fileName"+_uuid).html(_text+".");
}
},1000);
}
})(fileName);
}
});
//遮罩层点击隐藏事件
$("#mask"+self._id).click(function(e){
//console.info(e.currentTarget);
//console.info(e.target);
if($(e.target).hasClass("maskDiv")){
$(this).addClass("hide");
}
});
//上一张图片
//下一张图片
},
loadData:function(list){
var self=this;
//console.info(list);
var c=self._config;
var uploadServer=c.uploadFileServer;
var deleteServer=c.deleteServer;
var _html='';
for(var i=0,len=list.length;i<len;i++){
var item=list[i];
var _uuid=Math.random()+"";
_uuid=_uuid.replace(".","");
_html+='<div class="item" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">'
+' <p id="fileName'+_uuid+'" class="itemName">'+item.name+'</p>'
+' <p><a href="javascript:void(0);"><img id="img'+_uuid+'" idata="'+item.id+'" class="itemUrl" style="width:100%;" src="'+item.url+'" /></a></p>'
//+' <p><input id="'+_uuid+'" type="file" onchange="uploadFile(this,\''+_uuid+'\',\''+uploadServer+'\')" /></p>'
+' <p><button class="btn" type="button" onclick="reViewImgGroup(\''+self._id+'\',\''+_uuid+'\',this)">预览</button> <button class="btn" type="button" onclick="deleteImg(this,'+item.id+',\''+deleteServer+'\')">删除</button></p>'
+'</div>';
}
$("#lastItem"+self._id).before(_html);
},
getItemList:function(){
var self=this;
var values=[];
var list=$(self._el).find(".item");
for(var i=0,len=list.length;i<len;i++){
var el=list[i];
var _url=$(el).find(".itemUrl").attr("src");
if(!_url||_url==""){
continue;
}
var item={
name:$(el).find(".itemName").text(),
url:_url,
sort:i
}
//console.info($(el).html());
values.push(item);
}
return values;
}
}
//封装成jquery的控件
$.fn.DropWidget=function(options){
//生成uuid
var uuid=(new Date()).getTime();
var r=(Math.random()+"").replace(".","");
uuid+=r;
var _o=$.extend({},_widget);//后面的覆盖前面的
_o._id=uuid;
_o._el=this;
var _c=$.extend({},options,$.fn.DropWidget.defaults);//后面的覆盖前面的
_o._init(_c);
return _o;
}
})();
</script>
</head>
<body>
<div id="container"></div>
<div style="clear:both;"><a id="getDataBtn" href="javascript:void(0);">获取信息</a></div>
<script>
(function(){
//初始化数据
var list=[{
id:1,
name:"图片1.jpg",
sort:1,
url:"https://img.zcool.cn/community/0119da559a7d586ac72532640dbfc9.jpg"
},{
id:2,
name:"图片2.jpg",
sort:2,
url:"https://img.zcool.cn/community/0141ba559a7d576ac7253264bf5c1c.jpg"
},{
id:3,
name:"图片3.jpg",
sort:3,
url:"https://img.zcool.cn/community/01e83655bb57eb32f87528a1fb8789.jpg"
}];
//list=[];
//初始化控件
var _w=$("#container").DropWidget({
data:list,
uploadFileServer:"http://www.upload.json",
deleteServer:"http://www.delete.json"
});
//获取数据
$("#getDataBtn").click(function(){
var values=_w.getItemList();
console.info(values);
});
})();
</script>
</body>
</html>
- 大小: 177.3 KB
分享到:
相关推荐
可以一键上传,可以拖拽进行排序,异步上传,直接与后端配置直接上传到某个文件夹
8、支持图片多图上传和拖动排序 9、支持会员等级 演示地址:https://quan.demo.51duoke.cn/h5/ 商业版后端演示:http://quan.demo.51duoke.cn/admin/ 账号demo 密码demo (仅有查看权限) 后端下载地址:...
拖拽、拖放、拖放选取、拖放排序: 增加 mouseButton 选项用于指定点击哪个鼠标按键会出发拖放操作; 拖放排序修复调用 destroy() 方法出错的问题; 输入组: 优化输入组在紧凑表单内的圆角边框效果; 文档: ...
chrome支持文件夹拖拽上传。 [文件打开] office文件在线预览功能,服务器必须在公网(外部能访问该服务器) [忘记密码] 修改data/system/member.php 密码为明文的md5值 例如将admin密码重设为admin 则修改第一行:...
Ueditor是由百度Web前端研发部开发所见即所得的编辑器,具有轻...新增在高端浏览器下,Qq截图粘贴上传,拖拽图片到编辑上传 添加表格插入列标题功能 添加设置表格可排序功能,支持表格在预览页排序 添加生成目录功能
jQuery表格拖动排序插件TableDnD jQuery常用网站商品分类筛选功能 jquery-弹出表单录入商品信息 jQuery弹出层插件popupWindow.js jQuery调色板变换背景 jQuery调用百度地图坐标定位 jquery多功能表单验证2.0(原创) ...
9.增加:通用排序页,已用于模型字段,内容,商品(支持拖动排序);10.优化:引入BootStrap多选框,用于替代checkbox;11.新增:svg工具,支持面向base64\svg\png\WebP等格式生成;12.新增:后台-模型-字段可以选择类型,...
4 场景管理:可以动态加载可引用的用例,跨项目、跨模快,依赖用例列表支持拖拽排序和删 除 5 运行方式:可单个test,单个module,单个project,也可选择多个批量运行,支持自定义 测试计划,运行时可以灵活选择配置...
场景管理:可以动态加载可引用的用例,跨项目、跨模快,依赖用例列表支持拖拽排序和删除 运行方式:可单个test,单个module,单个project,也可选择多个批量运行,支持自定义测试计划,运行时可以灵活选择配置和...
- 场景管理:可以动态加载可引用的用例,跨项目、跨模快,依赖用例列表支持拖拽排序和删除 - 运行方式:可单个test,单个module,单个project,也可选择多个批量运行,支持自定义测试计划,运行时可以灵活选择配置...
6.20 表格的拖动排序 6.21 拖动调整控件的大小 6.22 调整控件大小时设置调整约束 6.23 使用拖动的方式调整表格的宽度 6.24 设计可改变单元格宽度并可以多选的表格 第7章 jQuery操作图形图像 7.1 如何更好地处理图片...
9、增加:通用排序页,已用于模型字段,内容,商品(支持拖动排序) 10、优化:引入BootStrap多选框,用于替代checkbox 11、新增:svg工具,支持面向base64\svg\png\WebP等格式生成 12、新增:后台-模型-字段可以选择类型...
iView admin是基于Vue.js,搭配使用iView UI组件库形成的一套后台集成解决方案,由TalkingData前端可视化团队部分成员开发维护.iView管理遵守iView设计和开发约定,风格统一,设计考研,并且更多功能在不停开发中。...
9、增加:通用排序页,已用于模型字段,内容,商品(支持拖动排序) 10、优化:引入BootStrap多选框,用于替代checkbox 11、新增:svg工具,支持面向base64\svg\png\WebP等格式生成 12、新增:后台-模型-字段可以选择类型...
bt对等方的客户信息等) 按指定的文件类型(视频,音频,图片,文档,应用程序,档案等)或文件扩展名过滤文件多目录任务的树形视图aria2或单个任务的下载/上传速度图全面支持aria2设置网址命令行API支持下载完成的...
文件上传:支持复制粘贴或者拖拽上传图片;支持上传普通文件;对 MP3 会使用在线播放器进行渲染 剪贴板处理:自动将复制的内容转换为 Markdown 格式;外链的图片自动上传站内 @用户:根据用户名自动补全,支持...
AriaNg 是一个现代 Web 前端,使 aria2 更易于使用。 AriaNg 是用纯 html 和 javascript 编写的,因此它不需要任何编译器或运行时环境。 您可以将 AriaNg 放入您的 Web 服务器并在您的浏览器中打开它。 AriaNg 使用...
另外,小程序前端github地址: : 此管理系统主要功能:微信小程序分类的增删改查微信小程序文章的增删改查微信小程序用户留言管理管理后台支持访问图片裁切上传,拖拽排序集成WangEditor富文本编辑器更多后续功能...
新增在高端浏览器下,qq截图粘贴上传,拖拽图片到编辑上传 添加表格插入列标题功能 添加设置表格可排序功能,支持表格在预览页排序 添加生成目录功能 优化修复 ie8以上版本使用w3cRange 使用grunt作为打包工具 修复...
新增在高端浏览器下,qq截图粘贴上传,拖拽图片到编辑上传 添加表格插入列标题功能 添加设置表格可排序功能,支持表格在预览页排序 添加生成目录功能 优化修复 ie8以上版本使用w3cRange 使用grunt作为打包工具 修复...