幸运飞艇停吗

ASP源碼.NET源碼PHP源碼JSP源碼JAVA源碼DELPHI源碼PB源碼VC源碼VB源碼Android源碼
當前位置:首頁 >> 網頁制作 >> web前端 >> 圖片上傳前端拖拽排序+支持多選擇圖片

圖片上傳前端拖拽排序+支持多選擇圖片

來源:網絡整理     時間:2018-10-17     關鍵詞:

幸运飞艇停吗 BENPIANWENZHANGZHUYAOJIESHAOLE" TUPIANSHANGCHUANQIANDUANTUOZHUAIPAIXU+ZHICHIDUOXUANZETUPIAN",ZHUYAOSHEJIDAOFANGMIANDENEIRONG,DUIYUwebQIANDUANGANXINGQUDETONGXUEKEYICANKAOYIXIA: MEISHIXIELEQIANDUANKONGJIAN ZHICHIXUANZEDUOZHANGTUPIAN TUOZHUAIPAIXU QUEDIANJIUSHIXUYAOYONGbase64SHANGCHUAN,BENLAISHIXIANGYONGERJINZHISHUJUSHANGCHUANDE,YINWEIbase64SHANGCHUAN,RUGUOSHIDATUPIANDEHUA,HUIHENMAN,QIEYOUXIE...

沒事寫了前端控件
支持選擇多張圖片
拖拽排序
缺點就是需要用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:"http://img.zcool.cn/community/0119da559a7d586ac72532640dbfc9.jpg"
	},{
		id:2,
		name:"圖片2.jpg",
		sort:2,
		url:"http://img.zcool.cn/community/0141ba559a7d576ac7253264bf5c1c.jpg"
	},{
		id:3,
		name:"圖片3.jpg",
		sort:3,
		url:"http://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>

YISHANGJIUJIESHAOLE TUPIANSHANGCHUANQIANDUANTUOZHUAIPAIXU+ZHICHIDUOXUANZETUPIAN,BAOKUOLEFANGMIANDENEIRONG,XIWANGDUIwebQIANDUANYOUXINGQUDEPENGYOUYOUSUOBANGZHU。

BENWENWANGZHILIANJIE:http://snifly.cn/article/detail_4593293.html

相關圖片

相關文章