图片上传前端拖拽排序+支持多选择图片

最新推荐文章于 2022-07-01 15:24:49 发布

haha662

最新推荐文章于 2022-07-01 15:24:49 发布

阅读量2.8k

点赞数

文章标签：文件上传拖拽排序选择多张

本文链接：https://blog.csdn.net/haha662/article/details/84927075

版权

没事写了前端控件
支持选择多张图片
拖拽排序

缺点就是需要用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>

haha662

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
图片上传前端拖拽排序+支持多选择图片

没事写了前端控件支持选择多张图片拖拽排序缺点就是需要用base64上传，本来是想用二进制数据上传的，因为base64上传，如果是大图片的话，会很慢，且有些服务器是不支持传很长的字符的[code="html"]拖拽demo#container { width:100%; white-space:nowrap; padding:0px...
复制链接

扫一扫