加拿大28

  • <tr id='upu74'><strong id='upu74'></strong><small id='upu74'></small><button id='upu74'></button><li id='upu74'><noscript id='upu74'><big id='upu74'></big><dt id='upu74'></dt></noscript></li></tr><ol id='upu74'><option id='upu74'><table id='upu74'><blockquote id='upu74'><tbody id='upu74'></tbody></blockquote></table></option></ol><u id='upu74'></u><kbd id='upu74'><kbd id='upu74'></kbd></kbd>

    <code id='upu74'><strong id='upu74'></strong></code>

    <fieldset id='upu74'></fieldset>
          <span id='upu74'></span>

              <ins id='upu74'></ins>
              <acronym id='upu74'><em id='upu74'></em><td id='upu74'><div id='upu74'></div></td></acronym><address id='upu74'><big id='upu74'><big id='upu74'></big><legend id='upu74'></legend></big></address>

              <i id='upu74'><div id='upu74'><ins id='upu74'></ins></div></i>
              <i id='upu74'></i>
            1. <dl id='upu74'></dl>
              1. 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://bayitaku.com/article/detail_4593293.html

                相关图片

                相关文章