ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> web前端 >> 图片上传前端拖拽排序+支持多选择图片

齐发国际登录

来源:网络整理     时间:2018-10-17     关键词:

本篇文章主要介绍了" 图片上传前端拖拽排序+支持多选择图片",主要涉及到方面的内容,对于web前端感齐发国际游戏的同学可以参考一下: 没事写了前端控件 支持选择多张图片 拖拽排序 缺点就是需要用base64上传,本来是想用二进制数据上传的,因为base64上传,如果是大图片的话,会很慢,且有些...

没事写了前端控件
支持选择多张图片
拖拽排序
缺点就是需要用base64上传,本来是想用二进制数据上传的,因为base64上传,如果是大图片的话,会很慢,且有些服务器是不支持传很长的字符的
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" c />
<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._c||{};
			self._render();
			self._bind();
		},
		_render:function(){
			var self=this;
			var c=self._config;
			//在最开始加入一个空的格子,即新增图片按钮
			//最后再加一个空的
			var _html='<div+self._id+'">'
					+'	<p></p>'
					+'	<p><a+self._id+'" >上传图片</a></p>'
					+'	<p><input+self._id+'" type="file" multiple /></p>'
					+'</div>';
			//预览图片层
			_html+='<div+self._id+'">'
				+'	<div>'
				+'		<div><a >上一张</a></div>'
				+'		<img+self._id+'" src="" />'
				+'		<span><a >下一张</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.
							console.log("开始读取....");
						}
						reader.
							console.log("正在读取中....");
						}
						reader. (e){
							console.log("中断读取....");
						}
						reader. (e){
							console.log("读取异常....");
						}
						reader.
							console.log("成功读取....");
							var imgMsg={
								name:imgName,//获取文件名
								base64:this.result//reader.readAsDataURL方法执行完后,base64数据储存在reader.result里
							}
							var _uuid=Math.random()+"";
							_uuid=_uuid.replace(".","");
							//创建显示域
							var _html='<div   draggable="true" >'+imgName+'</p>'
							+'	<p><a ><img+_uuid+'" src="" /></a></p>'
							//+'	<p><input+_uuid+'"  type="file" /></p>'
							+'	<p><button type="button"  type="button"    draggable="true" >'+item.name+'</p>'
					+'	<p><a ><img+_uuid+'" idata="'+item.id+'" src="'+item.url+'" /></a></p>'
					//+'	<p><input+_uuid+'" type="file"  /></p>'
					+'	<p><button type="button"  type="button"  >获取信息</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>

以上就介绍了 图片上传前端拖拽排序+支持多选择图片,包括了方面的内容,希望对web前端有齐发国际游戏的朋友有所帮助。

本文网址链接:http://www.machineofchina.com/article/detail_4593293.html

相关图片

相关文章