纯js仿淘宝多图片封面图插件模板/带视频,带放大镜,带前后端完整代码PHP

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

功能预览,他依赖jq插件,请自已引入
类似这样

<script type="text/javascript" src="/Application/Admin/Static/js/jquery-2.0.3.min.js"></script>

一,前端模板代码

	<!--多图功能-->
			<style>
@charset "utf-8";
.wrap_imgs img {
	vertical-align: middle;
	width: 100%;
	height: 100%;
}
.wrap_imgs {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;height:auto;
	min-height: 410px;
}
.imgss {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.wrap_mains {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 330px;
}
.smallers {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 82px;
	margin-top: 10px;
}
.smallers li ,.smallers span {
	position: relative;
	float: left;
	padding: 2px;
	width: 86px;
	height: 64px;
	border: 1px solid #ccc;
	margin: 0 5px;
	cursor: pointer;
	display:block;

}
.smallers li:first-child {
	margin-left: 0;
}
.smallers .current {
	border: 1px dashed #ec6941;
}
.bigers {
	position: absolute;
	overflow: hidden;
	display: none;
	left: 490px;
	width: 470px;
	height: 350px;
}
.masks {
	position: absolute;
	display: none;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
	background: url('./Public/home/images/mask-bg.png') repeat;
	cursor: crosshair;
}
.bigers img {
	position: absolute;
	left: 0;
	top: 0;z-index:100;
	width: 200%;
	height: 200%;
}

@media (max-width: 1439px) {
.smallers li ,.smallers span {
	width: 53px;
	height: 50px;
margin: 0 3px;
padding: 1px;
}
.wrap_mains {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 286px;
}
.bigers {
left: 450px;
	width: 470px;
	height: 300px;
}
.wrap_imgs {

	width: 100%;height:auto;
	min-height: 350px;
}
}

@media (max-width: 768px) {
.smallers li ,.smallers span {
	width: 56px;
	height: 50px;
margin: 0 3px;
padding: 1px;
}

}
</style>
<div class="wrap_imgs">
	<div class="bigers" id="bigers"></div>
	<div class="imgss">
		<div class="wrap_mains" id="wrap_mains">
		<notempty name="videob" >{$videob}</notempty>
			<div class="masks" id="masks"></div>
		</div>
		<ul class="smallers" id="smallers">
		<notempty name="videos" ><span id="smallvideo">{$videos}</span></notempty>
		</ul>
	</div>
</div>


<script>

function morepics(){
var bigvideo=document.getElementById('bigvideo');
var smallvideo=document.getElementById('smallvideo');
    var bigers=document.getElementById('bigers');//最终2倍放大的图
    var wrap_mains=document.getElementById('wrap_mains');
	var wrap_mains_Child=wrap_mains.getElementsByTagName('img');
    var smallers=document.getElementById('smallers');
    var masks=document.getElementById('masks');
    var wrap_imgs=bigers.parentNode;
    var imgArr=[
        {$tuku}
    ];
    var imgSum=imgArr.length;
    if(imgSum>4){
        imgSum=4;
    }
	
	//追加小图片列表
    for (var i=0;i<imgSum;i++) {
        var lis=document.createElement('li');
        var imgs=document.createElement('img');
        imgs.src=imgArr[i].path;
        lis.appendChild(imgs);
        smallers.appendChild(lis);
    }
	
    var wrap_mainsImg=document.createElement('img');//准备被放大的大图
    var bigImg=document.createElement('img');
    
	
	//如果视频存在
	if(bigvideo){
	 bigers.appendChild(bigImg);//先加载一个放大的2倍图
	 var bigPic=bigers.children[0];
	 var liArr=smallers.getElementsByTagName('li');
	  bigImg.src=liArr[0].children[0].src;
	  wrap_mainsImg.src=liArr[0].children[0].src;//初始化时
	  wrap_mainsImg.style.display='none';
    wrap_mains.insertBefore(wrap_mainsImg,masks);
	 //alert(liArr.length);
	 smallvideo.className='current';
	 smallvideo.onmouseover=function(){
            this.className='current';
			bigvideo.style.display='block';//视频显示.
			 wrap_mainsImg.style.display='none';//大图片隐藏
			   for (var j = 0; j < liArr.length; j++) {
                
                    liArr[j].removeAttribute('class');
                    liArr[j].removeAttribute('className');
      
            }
			}
	   for (var i=0;i<liArr.length;i++) {
        liArr[i].index=i;
        liArr[i].onmouseover=function(){
            this.className='current';
			smallvideo.removeAttribute('class');
					smallvideo.removeAttribute('className');
            bigPic.src=this.children[0].src;
			wrap_mains.children[1].src=this.children[0].src;
			bigvideo.style.display='none';//视频隐藏
			wrap_mainsImg.style.display='block';
            for (var j = 0; j < liArr.length; j++) {
                if(this!=liArr[j]){
                    liArr[j].removeAttribute('class');
                    liArr[j].removeAttribute('className');
                }
            }
        }
    }
	
	  wrap_mains.onmouseenter=function(){
	  if( smallvideo.className!='current'){
        masks.style.display='block';
        bigers.style.display='block';
		//alert(smallvideo.className);
    }
	}
	 
     wrap_mains.onmouseleave=function(){
        masks.style.display='none';
        bigers.style.display='none';
    }
    wrap_mains.onmousemove=function(e){
	if( smallvideo.className!='current'){
        var e = e || window.event;
        var pagex=e.pageX || scrolls().left+e.clientX;
        var pagey=e.pageY || scrolls().top+e.clientY;
        pagex=pagex-wrap_imgs.offsetLeft-masks.offsetWidth/2;;
        pagey=pagey-wrap_imgs.offsetTop-masks.offsetHeight/2;
        if(pagex<0){
            pagex=0;
        }
        if(pagey<0){
            pagey=0;
        }
        if(pagex>wrap_mains.offsetWidth-masks.offsetWidth){
            pagex=wrap_mains.offsetWidth-masks.offsetWidth;
        }
         if(pagey>wrap_mains.offsetHeight-masks.offsetHeight){
            pagey=wrap_mains.offsetHeight-masks.offsetHeight;
        }
        masks.style.left=pagex+'px';
        masks.style.top=pagey+'px';
        var scale=(bigPic.offsetWidth-bigers.offsetWidth)/(wrap_mains.offsetWidth-masks.offsetWidth);
        var xx=pagex*scale;
        var yy=pagey*scale;
        bigPic.style.left=-xx+'px';
        bigPic.style.top=-yy+'px';
    }
	}
	}else{
	
	var liArr=smallers.children;
	 bigImg.src=wrap_mainsImg.src=liArr[0].children[0].src;
    wrap_mains.insertBefore(wrap_mainsImg,masks);
    bigers.appendChild(bigImg);
	
	    var bigPic=bigers.children[0];
    liArr[0].className='current';
    for (var i=0;i<liArr.length;i++) {
        liArr[i].index=i;
        liArr[i].onmouseover=function(){
            this.className='current';
            bigPic.src=wrap_mains.children[0].src=this.children[0].src;
            for (var j = 0; j < liArr.length; j++) {
                if(this!=liArr[j]){
                    liArr[j].removeAttribute('class');
                    liArr[j].removeAttribute('className');
                }
            }
        }
    }
    wrap_mains.onmouseenter=function(){
        masks.style.display='block';
        bigers.style.display='block';
    }
     wrap_mains.onmouseleave=function(){
        masks.style.display='none';
        bigers.style.display='none';
    }
    wrap_mains.onmousemove=function(e){
        var e = e || window.event;
        var pagex=e.pageX || scrolls().left+e.clientX;
        var pagey=e.pageY || scrolls().top+e.clientY;
        pagex=pagex-wrap_imgs.offsetLeft-masks.offsetWidth/2;;
        pagey=pagey-wrap_imgs.offsetTop-masks.offsetHeight/2;
        if(pagex<0){
            pagex=0;
        }
        if(pagey<0){
            pagey=0;
        }
        if(pagex>wrap_mains.offsetWidth-masks.offsetWidth){
            pagex=wrap_mains.offsetWidth-masks.offsetWidth;
        }
         if(pagey>wrap_mains.offsetHeight-masks.offsetHeight){
            pagey=wrap_mains.offsetHeight-masks.offsetHeight;
        }
        masks.style.left=pagex+'px';
        masks.style.top=pagey+'px';
        var scale=(bigPic.offsetWidth-bigers.offsetWidth)/(wrap_mains.offsetWidth-masks.offsetWidth);
        var xx=pagex*scale;
        var yy=pagey*scale;
        bigPic.style.left=-xx+'px';
        bigPic.style.top=-yy+'px';
    }
	}
   

}
</script>

二,前端控制器代码


 $video=M('video')->where('cpinfo_id=1 and catid='.$id)->order('ctime desc')->find();	
		 if($video){
		$vvb='<video id="bigvideo" class="edui-upload-video  vjs-default-skin video-js" controls="" preload="none" width="100%" height="auto" style="min-height:350px" poster="" src="'.$video['url'].'" data-setup="{}"><source src="'.$video['url'].'" type="video/wav"></video>'; 
			  $vvs='<img  src="./Uploads/shipin_fengmian.jpg"/>'; 
		 }
		 $this->assign('videob',$vvb); 
		  $this->assign('videos',$vvs); 
		  $tuku=M('tuku')->where('cpinfo_id=0 and catid='.$id)->order('orderby asc')->select();	
		  $tus='';
		foreach($tuku as $v){
			$tus.='{"path":"'.$v['pic'].'"},';
		}
		$tus = substr($tus, 0, -1);
        $this->assign('tuku',$tus); 

三.数据库sql

CREATE TABLE `tg_video` (
  `id` int(11) NOT NULL,
  `cpinfo_id` int(11) DEFAULT '0',
  `title` varchar(100) DEFAULT NULL,
  `ctime` int(11) DEFAULT '0',
  `pic` varchar(300) DEFAULT NULL,
  `catid` int(11) NOT NULL DEFAULT '0' COMMENT '附件所属产品的分类',
  `url` varchar(300) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

ALTER TABLE `tg_video`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tg_video`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;
CREATE TABLE `tg_tuku` (
  `id` int(11) NOT NULL,
  `cpinfo_id` int(11) DEFAULT '0' COMMENT '0表示型号id未定,当catid大于0,cpinfo_id=0表示是分类专用图片.1表示添加分类时(catid=0),2表示添加产品时上传',
  `title` varchar(100) DEFAULT NULL,
  `ctime` int(11) DEFAULT '0',
  `pic` varchar(300) DEFAULT NULL,
  `catid` int(11) NOT NULL DEFAULT '0' COMMENT '附件所属产品的分类',
  `orderby` int(11) NOT NULL DEFAULT '0' COMMENT '排序',
  `retype` int(11) NOT NULL DEFAULT '0' COMMENT '图片所属分类的上级分类'
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
ALTER TABLE `tg_tuku`
  ADD PRIMARY KEY (`id`);
ALTER TABLE `tg_tuku`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

四,后台控制器


    //单列内容列表
 function insert_alltuku(){
			   $catid=(int)I('catid');
			   
			
	
			   $pic=I('pic');
			   //$pic='./Uploads/tuku/2023-11-07_10-53-01_929.jpg';
			   $o=M('tuku')->where("pic='".$pic."'")->find();
			 //  print_r($o);exit;
			   $arrr=array();
if	($o){
	
	   if($catid){
		$o2=M('conttype')->where('id='.$catid)->find();
		$arrr['retype']=$o2['retype'];
	}
	
	
	
	$arrr['pic']=$pic;
	$arrr['catid']=$catid;
	$arrr['title']=$o['title'];
	$arrr['ctime']=time();
	$arrr['cpinfo_id']=($catid==0)?1:0;
}			
		 $id=M('tuku')->add($arrr);		
				
if($id){
	M('tuku')->where('id='.$id)->setField('orderby',$id);
	echo json_encode(array('pic'=>$_POST['pic'],'id'=>$id));
}else{
        echo 0;
}
	}
function insert_alltuku_clist(){
			   $cpinfo_id=(int)I('cpinfo_id');
			   $catid=(int)I('catid');
			   $pic=I('pic');
			   //$pic='./Uploads/tuku/2023-11-07_10-53-01_929.jpg';
			   $o=M('tuku')->where("pic='".$pic."'")->find();
			 //  print_r($o);exit;
			   $arrr=array();
if	($o){
	
	   if($catid){
		$o2=M('conttype')->where('id='.$catid)->find();
		$arrr['retype']=$o2['retype'];
	}
	
	
	
	$arrr['pic']=$pic;
	$arrr['catid']=$catid;
	$arrr['title']=$o['title'];
	$arrr['ctime']=time();
	$arrr['cpinfo_id']=($cpinfo_id==0)?2:$cpinfo_id;
}			
		 $id=M('tuku')->add($arrr);		
				
if($id){
	M('tuku')->where('id='.$id)->setField('orderby',$id);
	echo json_encode(array('pic'=>$_POST['pic'],'id'=>$id));
}else{
        echo 0;
}
	}
function uploadifive(){
$catid=I('catid');
if($catid>0){//分类编辑
	  $count=M('tuku')->where('(cpinfo_id=0) and catid='.$catid)->count();
}else{ //分类添加
	$_POST['cpinfo_id']=1;
	$count=M('tuku')->where('cpinfo_id=1 and catid=0')->count();
		//  print_r($count);exit;
}
	 if($count>3) {echo 0;exit;}
		//  echo '<script>alert('.$count.');</script>';
		$uploadDir = '/Uploads/tuku/';
// Set the allowed file extensions
$fileTypes = array( 'png','jpg','jpeg','png','gif','webp'); // Allowed file extensions

if (!empty($_FILES) ) {
	$tempFile   = $_FILES['Filedata']['tmp_name'];
	$uploadDir  = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
	//$targetFile = $uploadDir . $_FILES['Filedata']['name'];
//后缀
 $lx=strrchr($_FILES['Filedata']['name'],".");
	// Validate the filetype
	$fileParts = pathinfo($_FILES['Filedata']['name']);
	if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
		// Save the file
			//  $lx=strrchr($tempFile,".");
            $newtime=date('Y-m-d_H-i-s').'_';
            $rund= rand(0,999);
           $_POST['pic']='./Uploads/tuku/'.$newtime.$rund.$lx; 
				
		$copy=move_uploaded_file($tempFile, $_POST['pic']);
		if($copy){
			//版本号
			//$bbh=basename($_FILES['Filedata']['name'],$lx);
		//	;
			//	M('user_exe')->where('id='.I('id'))->setField('new_v',$bbh);;
				$_POST['ctime']=time();
			//$_POST['orderby']=time();//$_POST['cpinfo_id']=0;//0表示产品型号id未定,产品保存后,修改成实际的,分类编辑后,重新设置为1.表示图片是分类专用的图片
			$id2=M('tuku')->add($_POST);
				
if($id2){
	M('tuku')->where('id='.$id2)->setField('orderby',$id2);
	if($catid){
		$o=M('conttype')->where('id='.$catid)->find();
		M('tuku')->where('id='.$id2)->setField('retype',$o['retype']);
	}
}
			//	header("Location: ?a=user_exe");
			//header("Location: ?a=user_exe");
		echo json_encode(array('pic'=>$_POST['pic'],'id'=>$id2));
}
	} else {

		// The file type wasn't allowed
		echo '文件类型禁止上传.';

	}
}	
			
		}
		


//视频上传
function uploadifive_v(){
$catid=I('catid');
$cpinfo_id=I('cpinfo_id');
	$is_catid=I('is_catid');
	if($is_catid){//如果是分类页
		$_POST['cpinfo_id']=1;
	}else{
		//产品页上传视频时
		$_POST['cpinfo_id']=$cpinfo_id==0?2:$cpinfo_id;//产品号为0时,表示在添加产品,
	}
		//  echo '<script>alert('.$count.');</script>';
		$uploadDir = '/Uploads/video/';
// Set the allowed file extensions
$fileTypes = array( 'mp4','3gp','avi','rm','wav','acc'); // Allowed file extensions

if (!empty($_FILES) ) {
	$tempFile   = $_FILES['Filedata']['tmp_name'];
	$uploadDir  = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
	//$targetFile = $uploadDir . $_FILES['Filedata']['name'];
//后缀
 $lx=strrchr($_FILES['Filedata']['name'],".");
	// Validate the filetype
	$fileParts = pathinfo($_FILES['Filedata']['name']);
	if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
		// Save the file
            $newtime=date('Y-m-d-His').'_';
            $rund= rand(0,9999);
           $_POST['url']='./Uploads/video/'.$newtime.$rund.$lx; 
				
		$copy=move_uploaded_file($tempFile, $_POST['url']);
		if($copy){
				$_POST['ctime']=time();
			$id2=M('video')->add($_POST);
				

if($id2){
	//M('video')->where('id='.$id2)->setField('orderby',$id2);
	//查询有重复视频,则删除
//echo ($catid);exit;
			//如果本分类存在其它视频.则判断是否是共用的
	if($is_catid){
		$cont=M('video')->where("id != $id2 and cpinfo_id=1 and catid =".$catid)->select();//cpinfo_id=0表示是分类专属图片.
	//echo json_encode($cont);exit;
	if($cont){
		
		
			foreach($cont as $v){
				$id3=$v['id'];
	$del=M('video')->where(" id=$id3 ")->delete();
	}
	}
	}else{
		$cont=M('video')->where("id != ".$id2 . " and ( cpinfo_id= 2 or cpinfo_id=".$cpinfo_id." ) " )->select();
		if($cont){
			foreach($cont as $v){
	$id3=$v['id'];
	$del=M('video')->where(" id=$id3 ")->delete();
		}
	}
		
		
	}
	
		
	
echo  $_POST['url'];
}
			//	header("Location: ?a=user_exe");
			//header("Location: ?a=user_exe");
		
}
	} else {

		// The file type wasn't allowed
		echo '文件类型禁止上传.';

	}
}	
			
		}
 	  //取消选择已存在的图
 	function del_tuku(){
		$id = $_POST['id'];
		$url = $_POST['url'];
		//$v['ctime']+259200)<time()
		$del=M('tuku')->where("id=".$id)->delete();
		$o3=M('tuku')->where("pic='".$url."'")->count();
			if($o3==0){
				$del=M('tuku')->where("id=".$id)->delete();		
				unlink($_SERVER['DOCUMENT_ROOT'].$url); 
			}
		if($del){
			echo 1;
		}else{
			echo 0;
		}
	}

 	   function get_tuku_clist(){
			   $id=(int)I('id')>2?(int)I('id'):2;
		$cont=M('tuku')->where("cpinfo_id=$id ")->order('ctime desc')->select();
if($cont){
	echo  json_encode($cont);;
}else{
        echo 0;
}
	}
	   function get_tuku(){
			   $catid=(int)I('typeid');
			   //$catid=579;
		$cont=M('tuku')->where("cpinfo_id=0 and catid =".$catid)->order('ctime desc')->select();
if($cont){
	echo  json_encode($cont);;
}else{
        echo 0;
}
	}

	   function change_order_tuku(){
			   $id=I('ids');
			   $order=I('order');
				$cont=M('tuku')->where("id =".$id)->setField('orderby',$order);
if($cont){
	echo 1;
}else{
        echo 0;
}
	}
	
		   function change_title_tuku(){
			   $id=I('ids');
			   $title=I('title');
				$cont=M('tuku')->where("id =".$id)->setField('title',$title);
if($cont){
	echo 1;
}else{
    echo 0;
}
	}

五,后台模板


<style>
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/

.uploadifive-button {
	background-color: #505050;
	background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
	background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
	background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
	background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
	background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #505050),
		color-stop(1, #707070)
	);
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	border: 2px solid #808080;
	color: #FFF;
	font: bold 12px Arial, Helvetica, sans-serif;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	text-transform: uppercase;
	width: 100%;
}
.uploadifive-button:hover {
	background-color: #606060;
	background-image: linear-gradient(top, #606060 0%, #808080 100%);
	background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
	background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
	background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
	background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #606060),
		color-stop(1, #808080)
	);
	background-position: center bottom;
}
.uploadifive-queue-item {
	background-color: #F5F5F5;
	border-bottom: 1px dotted #D5D5D5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font: 12px Arial, Helvetica, Sans-serif;
	margin-top: 3px;
	padding: 5px;
}
.uploadifive-queue-item .close {
	background: url('uploadifive-cancel.png') 0 0 no-repeat;
	display: block;
	float: right;
	height: 16px;
	text-indent: -9999px;
	width: 16px;
}
.uploadifive-queue-item .progress {
	border: 1px solid #D0D0D0;
	height: 3px;
	margin-top: 5px;
	width: 100%;
}
.uploadifive-queue-item .progress-bar {
	background-color: #0072BC;
	height: 3px;
	width: 0;
}
</style>


            <div class="form-item cf  col-sm-6">
<div id="fileQueue_v"></div>
			<input  id="file_upload_v" name="file_upload_v" type="file" multiple="true"/>
			
			可直接填写以前上传过的视频,地址格式需要以 ./Uploads/video/开头
			
			<div class="clearfix"></div><br/>
		<input  id="video" name="video" value="{$video.url}"placeholder="视频地址"class="text input-large form-control form-input-width" type="text" style="width:96%"/>
				请预览,以查看视频是否正确 </div>
				 
				  <div class="form-item cf  col-sm-4">

	
	<video id="video_see" class="edui-upload-video  vjs-default-skin video-js" controls="" preload="none" width="100%" height="120" poster="" src="{$video.url}" data-setup="{}">
        <source id="video_source" src="{$video.url}" type="video/mp4"/>
    </video>
				 </div>
            </div>
         


      <div class="form-item cf  col-sm-7">
			   
                <label class="item-label">产品多图,最多4张:排序号最小的默认设置为封面图,如果有多余图片,说明图片不属于任何分类,可直接删除<br/></font></label>
			  <div id="fileQueue"></div>
				
				   <div class="col-sm-2">
                   
				   <div style="padding:5px;text-align:center;">
				   <input id="file_upload"type="file"name="Filedata"/>
				   <div class="clearfix"></div>	<img style="border:1px solid #ccc;margin-top:5px" src="{$cont.pic2}" width="100%" height="auto"/> <div class="clearfix"></div>原封面图
				   
				 <p onclick="alltuku();"style="display:inline-block;border-radius: 16px;height: 32px; line-height: 32px; overflow: hidden; position: relative; text-align: center; font-size:12px;color:#fff;width: 140px;background: #ec6941;
   ">选择上传过的图片</p>  
				   
				   </div>
<input type="hidden" id='hiddenclick' value=''/>

                </div>
				
                <div class="col-sm-2">
                    <input id="inputorder1" type="text" onblur="change_order(1)" style="width:100%;"placeholder="排序编号 小的在前"/><div style="height:4px"> </div>
					
					<p style="position: relative;border:1px solid #ccc;"><img id="tuku1" src="__PUBLIC__/admin/images/nopic.png" width="100%" height="100"/>
					<p id="del_tuku1"style="background:#fff;display:none;color:red;position: absolute;right:10px;top:25px;border:1px solid red;padding:0 5px;"title="删除"onclick="del_tuku(1);">X</p>
					</p>
					
					<input id="inputtuku1" type="hidden" name="tuku1"/>
				   <textarea id="title1"placeholder="标题"onblur="change_title(1)" type="text" name="title1"class="" style="width:100%;"></textarea><br/>
				   
                </div>
				
				  <div class="col-sm-2">
                    <input id="inputorder2" type="text" onblur="change_order(2)" style="width:100%;"placeholder="排序编号 小的在前"/><div style="height:4px"> </div>
					
					<p style="position: relative;border:1px solid #ccc;"><img id="tuku2" src="__PUBLIC__/admin/images/nopic.png" width="100%" height="100"/>
					<p id="del_tuku2"style="background:#fff;display:none;color:red;position: absolute;right:10px;top:25px;border:1px solid red;padding:0 5px;"title="删除"onclick="del_tuku(2);">X</p>
					</p>
					
					<input id="inputtuku2" type="hidden" name="tuku2"/>
				   <textarea id="title2"placeholder="标题"onblur="change_title(2)" type="text" name="title2"class="" style="width:100%;"></textarea><br/>
				   
                </div>
				  <div class="col-sm-2">
                    <input id="inputorder3" type="text" onblur="change_order(3)" style="width:100%;"placeholder="排序编号 小的在前"/><div style="height:4px"> </div>
					
					<p style="position: relative;border:1px solid #ccc;"><img id="tuku3" src="__PUBLIC__/admin/images/nopic.png" width="100%" height="100"/>
					<p id="del_tuku3"style="background:#fff;display:none;color:red;position: absolute;right:10px;top:25px;border:1px solid red;padding:0 5px;"title="删除"onclick="del_tuku(3);">X</p>
					</p>
					
					<input id="inputtuku3" type="hidden" name="tuku3"/>
				   <textarea id="title3"placeholder="标题"onblur="change_title(3)" type="text" name="title3"class="" style="width:100%;"></textarea><br/>
				   
                </div>
				  <div class="col-sm-2">
                    <input id="inputorder4" type="text" onblur="change_order(4)" style="width:100%;"placeholder="排序编号 小的在前"/><div style="height:4px"> </div>
					
					<p style="position: relative;border:1px solid #ccc;"><img id="tuku4" src="__PUBLIC__/admin/images/nopic.png" width="100%" height="100"/>
					
					<p id="del_tuku4"style="background:#fff;display:none;color:red;position: absolute;right:10px;top:25px;border:1px solid red;padding:0 5px;"title="删除"onclick="del_tuku(4);">X</p>
					</p>
					
					<input id="inputtuku4" type="hidden" name="tuku4"/>
				   <textarea id="title4"placeholder="标题"onblur="change_title(4)" type="text" name="title4"class="" style="width:100%;"></textarea><br/>
				   
                </div>
				  
		
			<!--其它相关图片--><div class="clearfix"></div>
			<div id="other_tuku"style=".margin-top:10px;2border:1px solid #ccc;1overflow:hidden;display:none">
			<volist name="alltuku" id="v">
			<div class="col-sm-1">
			<a><img style="border:1px solid #ccc;"id="ins"onclick="insert_alltuku('{$v.pic}');" title="{$v.title}" src="{$v.pic}"/></a>
			</div>
			</volist>
			</div>
			<script type="text/javascript">
			/*
UploadiFive 1.2.3 上传插件
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
Released under the MIT License
*/
;(function($) {

    var methods = {

        init : function(options) {
            
            return this.each(function() {

                // Create a reference to the jQuery DOM object
                var $this = $(this);
                    $this.data('uploadifive', {
                        inputs     : {}, // The object that contains all the file inputs
                        inputCount : 0,  // The total number of file inputs created
                        fileID     : 0,
                        queue      : {
                             count      : 0, // Total number of files in the queue
                             selected   : 0, // Number of files selected in the last select operation
                             replaced   : 0, // Number of files replaced in the last select operation
                             errors     : 0, // Number of files that returned an error in the last select operation
                             queued     : 0, // Number of files added to the queue in the last select operation
                             cancelled  : 0  // Total number of files that have been cancelled or removed from the queue
                                     },
                        uploads    : {
                                         current    : 0, // Number of files currently being uploaded
                                         attempts   : 0, // Number of file uploads attempted in the last upload operation
                                         successful : 0, // Number of files successfully uploaded in the last upload operation
                                         errors     : 0, // Number of files returning errors in the last upload operation
                                         count      : 0  // Total number of files uploaded successfully
                                     }
                    });
                var $data = $this.data('uploadifive');

                // Set the default options
                var settings = $data.settings = $.extend({
                    'auto'            : true,               // Automatically upload a file when it's added to the queue
                    'buttonClass'     : false,              // A class to add to the UploadiFive button
                    'buttonText'      : '批量上传图片',     // The text that appears on the UploadiFive button
                    'checkScript'     : false,              // Path to the script that checks for existing file names 
                    'dnd'             : true,               // Allow drag and drop into the queue
                    'dropTarget'      : false,              // Selector for the drop target
                    'fileObjName'     : 'Filedata',         // The name of the file object to use in your server-side script
                    'fileSizeLimit'   : 0,                  // Maximum allowed size of files to upload
                    'fileType'        : false,              // Extension of files allowed (.zip,.rar,.7z,.pdf,...ETC.), separate with a comma character ,
                    'formData'        : {},                 // Additional data to send to the upload script
                    'height'          : 35,                 // The height of the button
                    'itemTemplate'    : false,              // The HTML markup for the item in the queue
                    'method'          : 'post',             // The method to use when submitting the upload
                    'multi'           : true,               // Set to true to allow multiple file selections
                    'overrideEvents'  : [],                 // An array of events to override
                    'queueID'         : false,              // The ID of the file queue
                    'queueSizeLimit'  : 0,                  // The maximum number of files that can be in the queue
                    'removeCompleted' : true,              // Set to true to remove files that have completed uploading
                    'simUploadLimit'  : 0,                  // The maximum number of files to upload at once
                    'truncateLength'  : 0,                  // The length to truncate the file names to
                    'uploadLimit'     : 0,                  // The maximum number of files you can upload
                    'uploadScript'    : 'uploadifive.php',  // The path to the upload script
                    'width'           : 120                 // The width of the button

                    /*
                    // Events
                    'onAddQueueItem'   : function(file) {},                        // Triggered for each file that is added to the queue
                    'onCancel'         : function(file) {},                        // Triggered when a file is cancelled or removed from the queue
                    'onCheck'          : function(file, exists) {},                // Triggered when the server is checked for an existing file
                    'onClearQueue'     : function(queue) {},                       // Triggered during the clearQueue function
                    'onDestroy'        : function() {}                             // Triggered during the destroy function
                    'onDrop'           : function(files, numberOfFilesDropped) {}, // Triggered when files are dropped into the file queue
                    'onError'          : function(file, fileType, data) {},        // Triggered when an error occurs
                    'onFallback'       : function() {},                            // Triggered if the HTML5 File API is not supported by the browser
                    'onInit'           : function() {},                            // Triggered when UploadiFive if initialized
                    'onQueueComplete'  : function() {},                            // Triggered once when an upload queue is done
                    'onProgress'       : function(file, event) {},                 // Triggered during each progress update of an upload
                    'onSelect'         : function() {},                            // Triggered once when files are selected from a dialog box
                    'onUpload'         : function(file) {},                        // Triggered when an upload queue is started
                    'onUploadComplete' : function(file, data) {},                  // Triggered when a file is successfully uploaded
                    'onUploadFile'     : function(file) {},                        // Triggered for each file being uploaded
                    */
                }, options);

                // Create an array of file types
                var file_types;
                if (settings.fileType) {
                    file_types = settings.fileType.split(',');
                }

                // Calculate the file size limit
                if (isNaN(settings.fileSizeLimit)) {
                    var fileSizeLimitBytes = parseInt(settings.fileSizeLimit) * 1.024;
                    if (settings.fileSizeLimit.indexOf('KB') > -1) {
                        settings.fileSizeLimit = fileSizeLimitBytes * 1000;
                    } else if (settings.fileSizeLimit.indexOf('MB') > -1) {
                        settings.fileSizeLimit = fileSizeLimitBytes * 1000000;
                    } else if (settings.fileSizeLimit.indexOf('GB') > -1) {
                        settings.fileSizeLimit = fileSizeLimitBytes * 1000000000;
                    }
                } else {
                    settings.fileSizeLimit = settings.fileSizeLimit * 1024;
                }

                // Create a template for a file input
                $data.inputTemplate = $('<input type="file">')
                .css({
                    'font-size' : settings.height + 'px',
                    'opacity'   : 0,
                    'position'  : 'absolute',
                    'right'     : '-3px',
                    'top'       : '-3px',
                    'z-index'   : 999 
                });

                // Create a new input
                $data.createInput = function() {

                    // Create a clone of the file input
                    var input     = $data.inputTemplate.clone();
                    // Create a unique name for the input item
                    var inputName = input.name = 'input' + $data.inputCount++;
                    // Set the multiple attribute
                    if (settings.multi) {
                        input.attr('multiple', true);
                    }
                    // Set the accept attribute on the input
                    if (settings.fileType) {
                        input.attr('accept', settings.fileType);
                    }
                    // Set the onchange event for the input
                    input.bind('change', function() {
                        $data.queue.selected = 0;
                        $data.queue.replaced = 0;
                        $data.queue.errors   = 0;
                        $data.queue.queued   = 0;
                        // Add a queue item to the queue for each file
                        var limit = this.files.length;
                        $data.queue.selected = limit;//表示多选文件数
						//alert(limit );
                        if (($data.queue.count + limit) > settings.queueSizeLimit //&& settings.queueSizeLimit !== 0
						) {
                            if ($.inArray('onError', settings.overrideEvents) < 0) {
                                alert('目前的上传数量不得超过 ' + settings.queueSizeLimit + '. ');
                            }
                            // Trigger the error event
                            if (typeof settings.onError === 'function') {
                                settings.onError.call($this, 'QUEUE_LIMIT_EXCEEDED');
                            }
                        } else {
                            for (var n = 0; n < limit; n++) {
                                file = this.files[n];
                                $data.addQueueItem(file);
                            }
                            $data.inputs[inputName] = this;
                            $data.createInput();
                        }
                        // Upload the file if auto-uploads are enabled
                        if (settings.auto) {
                            methods.upload.call($this);
                        }
                        // Trigger the select event
                        if (typeof settings.onSelect === 'function') {
                            settings.onSelect.call($this, $data.queue);
                        }
                    });
                    // Hide the existing current item and add the new one
                    if ($data.currentInput) {
                        $data.currentInput.hide();
                    }
                    $data.button.append(input);
                    $data.currentInput = input;
                };

                // Remove an input
                $data.destroyInput = function(key) {
                    $($data.inputs[key]).remove();
                    delete $data.inputs[key];
                    $data.inputCount--;
                };

                // Drop a file into the queue
                $data.drop = function(e) {
                    // Stop FireFox from opening the dropped file(s)
                    e.preventDefault();
                    e.stopPropagation();

                    $data.queue.selected = 0;
                    $data.queue.replaced = 0;
                    $data.queue.errors   = 0;
                    $data.queue.queued   = 0;

                    var fileData = e.dataTransfer;

                    var inputName = fileData.name = 'input' + $data.inputCount++;
                    // Add a queue item to the queue for each file
                    var limit = fileData.files.length;alert(limit );
                    $data.queue.selected = limit;
                    if (($data.queue.count + limit) > settings.queueSizeLimit
					//Loop through the files&& settings.queueSizeLimit !== 0
					) {
                        // Check if the queueSizeLimit was reached
                        if ($.inArray('onError', settings.overrideEvents) < 0) {
                            alert('The maximum number of queue items has been reached (' + settings.queueSizeLimit + ').  Please select fewer files.');
                        }
                        // Trigger the onError event
                        if (typeof settings.onError === 'function') {
                            settings.onError.call($this, 'QUEUE_LIMIT_EXCEEDED');
                        }
                    } else {
                        // Add a queue item for each file
                        for (var n = 0; n < limit; n++) {
                            file = fileData.files[n];
                            $data.addQueueItem(file);
                            // Check the filetype
							if (file_types) {
								if(file_types.indexOf(file.name.substring(file.name.lastIndexOf('.')))<0)
									$data.error('FORBIDDEN_FILE_TYPE', file);
							}
                        }
                        // Save the data to the inputs object
                        $data.inputs[inputName] = fileData;
                    }

                    // Upload the file if auto-uploads are enabled
                    if (settings.auto) {
                        methods.upload.call($this);
                    }

                    // Trigger the onDrop event
                    if (typeof settings.onDrop === 'function') {
                        settings.onDrop.call($this, fileData.files, fileData.files.length);
                    }
                };

                // Check if a filename exists in the queue
                $data.fileExistsInQueue = function(file) {
                    for (var key in $data.inputs) {
                        input = $data.inputs[key];
                        limit = input.files.length;
                        for (var n = 0; n < limit; n++) {
                            existingFile = input.files[n];
                            // Check if the filename matches
                            if (existingFile.name == file.name && !existingFile.complete) {
                                return true;
                            }
                        }
                    }
                    return false;
                };

                // Remove an existing file in the queue
                $data.removeExistingFile = function(file) {
                    for (var key in $data.inputs) {
                        input = $data.inputs[key];
                        limit = input.files.length;
                        for (var n = 0; n < limit; n++) {
                            existingFile = input.files[n];
                            // Check if the filename matches
                            if (existingFile.name == file.name && !existingFile.complete) {
                                $data.queue.replaced++;
                                methods.cancel.call($this, existingFile, true);
                            }
                        }
                    }
                };

                // Create the file item template
                if (settings.itemTemplate === false) {
                    $data.queueItem = $('<div class="uploadifive-queue-item">' +
                        '<a class="close" href="#">X</a>' +
                        '<div><span class="filename"></span><span class="fileinfo"></span></div>' +
                        '<div class="progress">' +
                            '<div class="progress-bar"></div>' +
                        '</div>' +
                    '</div>');
                } else {
                    $data.queueItem = $(settings.itemTemplate);
                }

                // Add an item to the queue
                $data.addQueueItem = function(file) {
                    if ($.inArray('onAddQueueItem', settings.overrideEvents) < 0) {
                        // Check if the filename already exists in the queue
                        $data.removeExistingFile(file);
                        // Create a clone of the queue item template
                        file.queueItem = $data.queueItem.clone();
                        // Add an ID to the queue item
                        file.queueItem.attr('id', settings.id + '-file-' + $data.fileID++);
                        // Bind the close event to the close button
                        file.queueItem.find('.close').bind('click', function() {
                           methods.cancel.call($this, file);
                           return false;
                        });
                        var fileName = file.name;
                        if (fileName.length > settings.truncateLength && settings.truncateLength !== 0) {
                            fileName = fileName.substring(0, settings.truncateLength) + '...';
                        }
                        file.queueItem.find('.filename').html(fileName);
                        // Add a reference to the file
                        file.queueItem.data('file', file);
                        $data.queueEl.append(file.queueItem);
                    }
                    // Trigger the addQueueItem event
                    if (typeof settings.onAddQueueItem === 'function') {
                        settings.onAddQueueItem.call($this, file);
                    }
					// Check the filetype
					if (file_types) {
						if(file_types.indexOf(file.name.substring(file.name.lastIndexOf('.')))<0)
							$data.error('FORBIDDEN_FILE_TYPE', file);
                    }
                    // Check the filesize
                    if (file.size > settings.fileSizeLimit && settings.fileSizeLimit !== 0) {
                        $data.error('FILE_SIZE_LIMIT_EXCEEDED', file);
                    } else {
                        $data.queue.queued++;
                        $data.queue.count++;
                    }
                };

                // Remove an item from the queue
                $data.removeQueueItem = function(file, instant, delay) {
                    // Set the default delay
                    if (!delay) delay = 0;
                    var fadeTime = instant ? 0 : 500;
                    if (file.queueItem) {
                        if (file.queueItem.find('.fileinfo').html() != ' - Completed') {
                            file.queueItem.find('.fileinfo').html(' - Cancelled');
                        }
                        file.queueItem.find('.progress-bar').width(0);
                        file.queueItem.delay(delay).fadeOut(fadeTime, function() {
                           $(this).remove();
                        });
                        delete file.queueItem;
                        $data.queue.count--;
                    }
                };

                // Count the number of files that need to be uploaded
                $data.filesToUpload = function() {
                    var filesToUpload = 0;
                    for (var key in $data.inputs) {
                        input = $data.inputs[key];
                        limit = input.files.length;
                        for (var n = 0; n < limit; n++) {
                            file = input.files[n];
                            if (!file.skip && !file.complete) {
                                filesToUpload++;
                            }
                        }
                    }
                    return filesToUpload;
                };

                // Check if a file exists
                $data.checkExists = function(file) {
                    if ($.inArray('onCheck', settings.overrideEvents) < 0) {
                        // This request needs to be synchronous
                        $.ajaxSetup({
                            'async' : false
                        });
                        // Send the filename to the check script
                        var checkData = $.extend(settings.formData, {filename: file.name});
                        $.post(settings.checkScript, checkData, function(fileExists) {
                            file.exists = parseInt(fileExists);
                        });
                        if (file.exists) {
                            if (!confirm('A file named ' + file.name + ' already exists in the upload folder.\nWould you like to replace it?')) {
                                // If not replacing the file, cancel the upload
                                methods.cancel.call($this, file);
                                return true;
                            }
                        }
                    }
                    // Trigger the check event
                    if (typeof settings.onCheck === 'function') {
                        settings.onCheck.call($this, file, file.exists);
                    }
                    return false;
                };

                // Upload a single file
                $data.uploadFile = function(file, uploadAll) {
                    if (!file.skip && !file.complete && !file.uploading) {
                        file.uploading = true;
                        $data.uploads.current++;
                        $data.uploads.attempted++;

                        // Create a new AJAX request
                        xhr = file.xhr = new XMLHttpRequest();

                        // Start the upload
                        // Use the faster FormData if it exists
                        if (typeof FormData === 'function' || typeof FormData === 'object') {

                            // Create a new FormData object
                            var formData = new FormData();

                            // Add the form data
                            formData.append(settings.fileObjName, file);

                            // Add the rest of the formData
                            for (var i in settings.formData) {
                                formData.append(i, settings.formData[i]);
                            }

                            // Open the AJAX call
                            xhr.open(settings.method, settings.uploadScript, true);

                            // On progress function
                            xhr.upload.addEventListener('progress', function(e) {
                                if (e.lengthComputable) {
                                    $data.progress(e, file);
                                }
                            }, false);

                            // On complete function
                            xhr.addEventListener('load', function(e) {
                                if (this.readyState == 4) {
                                    file.uploading = false;
                                    if (this.status == 200) {
                                        if (file.xhr.responseText !== 'Invalid file type.') {
                                            $data.uploadComplete(e, file, uploadAll);
                                        } else {
                                            $data.error(file.xhr.responseText, file, uploadAll);
                                        }
                                    } else if (this.status == 404) {
                                        $data.error('404_FILE_NOT_FOUND', file, uploadAll);
                                    } else if (this.status == 403) {
                                        $data.error('403_FORBIDDEN', file, uploadAll);
                                    } else {
                                        $data.error('Unknown Error', file, uploadAll);
                                    }
                                }
                            });

                            // Send the form data (multipart/form-data)
                            xhr.send(formData);

                        } else {

                            // Send as binary
                            var reader = new FileReader();
                            reader.onload = function(e) {

                                // Set some file builder variables
                                var boundary = '-------------------------' + (new Date()).getTime(),
                                    dashes   = '--',
                                    eol      = '\r\n',
                                    binFile  = '';

                                // Build an RFC2388 String 
                                binFile += dashes + boundary + eol;
                                // Generate the headers
                                binFile += 'Content-Disposition: form-data; name="' + settings.fileObjName + '"';
                                if (file.name) {
                                    binFile += '; filename="' + file.name + '"';
                                }
                                binFile += eol;
                                binFile += 'Content-Type: application/octet-stream' + eol + eol;
                                binFile += e.target.result + eol;

                                for (var key in settings.formData) {
                                    binFile += dashes + boundary + eol;
                                    binFile += 'Content-Disposition: form-data; name="' + key + '"' + eol + eol;
                                    binFile += settings.formData[key] + eol;
                                }

                                binFile += dashes + boundary + dashes + eol;

                                // On progress function
                                xhr.upload.addEventListener('progress', function(e) {
                                    $data.progress(e, file);
                                }, false);

                                // On complete function
                                xhr.addEventListener('load', function(e) {
                                    file.uploading = false;
                                    var status = this.status;
                                    if (status == 404) {
                                        $data.error('404_FILE_NOT_FOUND', file, uploadAll);
                                    } else {
                                        if (file.xhr.responseText != 'Invalid file type.') {    
                                            $data.uploadComplete(e, file, uploadAll);
                                        } else {
                                            $data.error(file.xhr.responseText, file, uploadAll);
                                        } 
                                    }
                                }, false);

                                // Open the ajax request
                                var url = settings.uploadScript;
                                if (settings.method == 'get') {
                                    var params = $(settings.formData).param();
                                    url += params;
                                }
                                xhr.open(settings.method, settings.uploadScript, true);
                                xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);

                                // Trigger the uploadFile event
                                if (typeof settings.onUploadFile === 'function') {
                                    settings.onUploadFile.call($this, file);
                                }

                                // Send the file for upload
                                xhr.sendAsBinary(binFile);
                            };
                            reader.readAsBinaryString(file);

                        }
                    }
                };

                // Update a file upload's progress
                $data.progress = function(e, file) {
                    var percent;
                    if ($.inArray('onProgress', settings.overrideEvents) < 0) {
                        if (e.lengthComputable) {
                            percent = Math.round((e.loaded / e.total) * 100);
                        }
                        file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
                        file.queueItem.find('.progress-bar').css('width', percent + '%');
                    }
                    // Trigger the progress event
                    if (typeof settings.onProgress === 'function') {
                        settings.onProgress.call($this, file, e);
                    }
                };

                // Trigger an error
                $data.error = function(errorType, file, uploadAll) {
                    if ($.inArray('onError', settings.overrideEvents) < 0) {
                        // Get the error message
                        switch(errorType) {
                            case '404_FILE_NOT_FOUND':
                                errorMsg = '404 Error';
                                break;
                            case '403_FORBIDDEN':
                                errorMsg = '403 Forbidden';
                                break;
                            case 'FORBIDDEN_FILE_TYPE':
                                errorMsg = 'Forbidden File Type';
                                break;
                            case 'FILE_SIZE_LIMIT_EXCEEDED':
                                errorMsg = 'File Too Large';
                                break;
                            default:
                                errorMsg = 'Unknown Error';
                                break;
                        }

                        // Add the error class to the queue item
                        file.queueItem.addClass('error')
                        // Output the error in the queue item
                        .find('.fileinfo').html(' - ' + errorMsg);
                        // Hide the 
                        file.queueItem.find('.progress').remove();
                    }
                    // Trigger the error event
                    if (typeof settings.onError === 'function') {
                        settings.onError.call($this, errorType, file);
                    }
                    file.skip = true;
                    if (errorType == '404_FILE_NOT_FOUND') {
                        $data.uploads.errors++;
                    } else {
                        $data.queue.errors++;
                    }
                    if (uploadAll) {
                        methods.upload.call($this, null, true);
                    }
                };

                // Trigger when a single file upload is complete
                $data.uploadComplete = function(e, file, uploadAll) {
                    if ($.inArray('onUploadComplete', settings.overrideEvents) < 0) {
                        file.queueItem.find('.progress-bar').css('width', '100%');
                        file.queueItem.find('.fileinfo').html(' - Completed');
                        file.queueItem.find('.progress').slideUp(250);
                        file.queueItem.addClass('complete');
                    }
                    // Trigger the complete event
                    if (typeof settings.onUploadComplete === 'function') {
                        settings.onUploadComplete.call($this, file, file.xhr.responseText);
                    }
                    if (settings.removeCompleted) {
                        setTimeout(function() { methods.cancel.call($this, file); }, 3000);
                    }
                    file.complete = true;
                    $data.uploads.successful++;
                    $data.uploads.count++;
                    $data.uploads.current--;
                    delete file.xhr;
                    if (uploadAll) {
                        methods.upload.call($this, null, true);
                    }
                };

                // Trigger when all the files are done uploading
                $data.queueComplete = function() {
                    // Trigger the queueComplete event
                    if (typeof settings.onQueueComplete === 'function') {
                        settings.onQueueComplete.call($this, $data.uploads);
                    }
                };

                // ----------------------
                // Initialize UploadiFive
                // ----------------------

                // Check if HTML5 is available
                if (window.File && window.FileList && window.Blob && (window.FileReader || window.FormData)) {
                    // Assign an ID to the object
                    settings.id = 'uploadifive-' + $this.attr('id');

                    // Wrap the file input in a div with overflow set to hidden
                    $data.button = $('<div id="' + settings.id + '" class="uploadifive-button">' + settings.buttonText + '</div>');
                    if (settings.buttonClass) $data.button.addClass(settings.buttonClass);

                    // Style the button wrapper
                    $data.button.css({
                        'height'      : settings.height,
                        'line-height' : settings.height + 'px', 
                        'overflow'    : 'hidden',
                        'position'    : 'relative',
                        'text-align'  : 'center', 
                        'width'       : settings.width
                    });

                    // Insert the button above the file input
                    $this.before($data.button)
                    // Add the file input to the button
                    .appendTo($data.button)
                    // Modify the styles of the file input
                    .hide();

                    // Create a new input
                    $data.createInput.call($this);

                    // Create the queue container
                    if (!settings.queueID) {
                        settings.queueID = settings.id + '-queue';
                        $data.queueEl = $('<div id="' + settings.queueID + '" class="uploadifive-queue" />');
                        $data.button.after($data.queueEl);
                    } else {
                        $data.queueEl = $('#' + settings.queueID);
                    }

                    // Add drag and drop functionality
                    if (settings.dnd) {
                        var $dropTarget = settings.dropTarget ? $(settings.dropTarget) : $data.queueEl.get(0);
                        $dropTarget.addEventListener('dragleave', function(e) {
                            // Stop FireFox from opening the dropped file(s)
                            e.preventDefault();
                            e.stopPropagation();
                        }, false);
                        $dropTarget.addEventListener('dragenter', function(e) {
                            // Stop FireFox from opening the dropped file(s)
                            e.preventDefault();
                            e.stopPropagation();
                        }, false);
                        $dropTarget.addEventListener('dragover', function(e) {
                            // Stop FireFox from opening the dropped file(s)
                            e.preventDefault();
                            e.stopPropagation();
                        }, false);
                        $dropTarget.addEventListener('drop', $data.drop, false);
                    }

                    // Send as binary workaround for Chrome
                    if (!XMLHttpRequest.prototype.sendAsBinary) {
                        XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
                            function byteValue(x) {
                                return x.charCodeAt(0) & 0xff;
                            }
                            var ords = Array.prototype.map.call(datastr, byteValue);
                            var ui8a = new Uint8Array(ords);
                            this.send(ui8a.buffer);
                        };
                    }

                    // Trigger the oninit event
                    if (typeof settings.onInit === 'function') {
                        settings.onInit.call($this);
                    }

                } else {

                    // Trigger the fallback event
                    if (typeof settings.onFallback === 'function') {
                        settings.onFallback.call($this);
                    }
                    return false;

                }

            });

        },


        // Write some data to the console
        debug : function() {

            return this.each(function() {

                console.log($(this).data('uploadifive'));

            });

        },

        // Clear all the items from the queue
        clearQueue : function() {

            this.each(function() {

                var $this    = $(this),
                    $data    = $this.data('uploadifive'),
                    settings = $data.settings;

                for (var key in $data.inputs) {
                    input = $data.inputs[key];
                    limit = input.files.length;
                    for (i = 0; i < limit; i++) {
                        file = input.files[i];
                        methods.cancel.call($this, file);
                    }
                }
                // Trigger the onClearQueue event
                if (typeof settings.onClearQueue === 'function') {
                    settings.onClearQueue.call($this, $('#' + $data.settings.queueID));
                }

            });

        },

        // Cancel a file upload in progress or remove a file from the queue
        cancel : function(file, fast) {

            this.each(function() {

                var $this    = $(this),
                    $data    = $this.data('uploadifive'),
                    settings = $data.settings;

                // If user passed a queue item ID instead of file...
                if (typeof file === 'string') {
                    if (!isNaN(file)) {
                        fileID = 'uploadifive-' + $(this).attr('id') + '-file-' + file;
                    }
                    file = $('#' + fileID).data('file');
                }

                file.skip = true;
                $data.filesCancelled++;
                if (file.uploading) {
                    $data.uploads.current--;
                    file.uploading = false;
                    file.xhr.abort();
                    delete file.xhr;
                    methods.upload.call($this);
                }
                if ($.inArray('onCancel', settings.overrideEvents) < 0) {
                    $data.removeQueueItem(file, fast);
                }

                // Trigger the cancel event
                if (typeof settings.onCancel === 'function') {
                    settings.onCancel.call($this, file);
                }
                
            });
            
        },

        // Upload the files in the queue
        upload : function(file, keepVars) {

            this.each(function() {

                var $this    = $(this),
                    $data    = $this.data('uploadifive'),
                    settings = $data.settings;

                if (file) {

                    $data.uploadFile.call($this, file);

                } else {

                    // Check if the upload limit was reached
                    if (($data.uploads.count + $data.uploads.current) < settings.uploadLimit || settings.uploadLimit === 0) {
                        if (!keepVars) {
                            $data.uploads.attempted   = 0;
                            $data.uploads.successsful = 0;
                            $data.uploads.errors      = 0;
                            var filesToUpload = $data.filesToUpload();
                            // Trigger the onUpload event
                            if (typeof settings.onUpload === 'function') {
                                settings.onUpload.call($this, filesToUpload);
                            }
                        }

                        // Loop through the files
                        $('#' + settings.queueID).find('.uploadifive-queue-item').not('.error, .complete').each(function() {
                            _file = $(this).data('file');
                            // Check if the simUpload limit was reached
                            if (($data.uploads.current >= settings.simUploadLimit && settings.simUploadLimit !== 0) || ($data.uploads.current >= settings.uploadLimit && settings.uploadLimit !== 0) || ($data.uploads.count >= settings.uploadLimit && settings.uploadLimit !== 0)) {
                                return false;
                            }
                            if (settings.checkScript) {
                                // Let the loop know that we're already processing this file
                                _file.checking = true;
                                skipFile = $data.checkExists(_file);
                                _file.checking = false;
                                if (!skipFile) {
                                    $data.uploadFile(_file, true);
                                }
                            } else {
                                $data.uploadFile(_file, true);
                            }
                        });
                        if ($('#' + settings.queueID).find('.uploadifive-queue-item').not('.error, .complete').size() === 0) {
                            $data.queueComplete();
                        }
                    } else {
                        if ($data.uploads.current === 0) {
                            if ($.inArray('onError', settings.overrideEvents) < 0) {
                                if ($data.filesToUpload() > 0 && settings.uploadLimit !== 0) {
                                    alert('The maximum upload limit has been reached.');
                                }
                            }
                            // Trigger the onError event
                            if (typeof settings.onError === 'function') {
                                settings.onError.call($this, 'UPLOAD_LIMIT_EXCEEDED', $data.filesToUpload());
                            }
                        }
                    }

                }

            });

        },

        // Destroy an instance of UploadiFive
        destroy : function() {

            this.each(function() {

                var $this    = $(this),
                    $data    = $this.data('uploadifive'),
                    settings = $data.settings;
            
                // Clear the queue
                methods.clearQueue.call($this);
                // Destroy the queue if it was created
                if (!settings.queueID) $('#' + settings.queueID).remove();
                // Remove extra inputs
                $this.siblings('input').remove();
                // Show the original file input
                $this.show()
                // Move the file input out of the button
                .insertBefore($data.button);
                // Delete the button
                $data.button.remove();
                // Trigger the destroy event
                if (typeof settings.onDestroy === 'function') {
                    settings.onDestroy.call($this);
                }

            });

        }

    };

    $.fn.uploadifive = function(method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('The method ' + method + ' does not exist in $.uploadify');
        }

    };

})(jQuery);
//UploadiFive 1.2.3 上传插件结束


			var catid='{$typeid}';//变量后端传值
		var retype='{$retype}';
			  	function alltuku(){
 $("#other_tuku").toggle();
}
		 function insert_alltuku(pic){
		
		//alert(pic);
 $.post("{:U('insert_alltuku')}", {'pic':pic,'catid':catid}, function(response2){
                if( response2 != 0 ){
			//	alert(1);
			var response3 = JSON.parse(response2);
				var response= response3.pic;	
				if($('#tuku1').attr('src') =='/Public/admin/images/nopic.png'){
$('#tuku1').prop('src', response);
$('#tuku1').prop('alt', response3.id);
$('#inputorder1').prop('value', response3.id);
$('#del_tuku1').show();
//alert('1插入完成:'+ $('#inputtuku1').val().length );
}else if
($('#tuku2').attr('src') =='/Public/admin/images/nopic.png'){
$('#tuku2').prop('src', response);
$('#tuku2').prop('alt', response3.id);
$('#inputorder2').prop('value', response3.id);
$('#del_tuku2').show();
}  else if
($('#tuku3').attr('src') =='/Public/admin/images/nopic.png'){
$('#tuku3').prop('src', response);
$('#tuku3').prop('alt', response3.id);
$('#inputorder3').prop('value', response3.id);
$('#del_tuku3').show();
} else if
($('#tuku4').attr('src') =='/Public/admin/images/nopic.png'){
$('#tuku4').prop('src', response);
$('#tuku4').prop('alt', response3.id);
$('#inputorder4').prop('value', response3.id);
$('#del_tuku4').show();
}  
				
                    show_alert('成功!');	
                }else{
			//	alert(00);
				show_alert('失败');}
            });
	
}


$(function() {
		//自动填写已上传图片	
		var alltuku=[];
		
		var typeid=<?php echo $typeid>0?$typeid:0;?>;
	//	alert(typeid);
		$.post("{:U('get_tuku')}", {'typeid':typeid ,'retype':retype}, function(v){
                if( v == 0 ){
                    show_alert('图片加载失败!');	
                }else{
				var alltuku = JSON.parse(v);
				//var response= response3.pic;
			
let len = alltuku.length;
//alert('len:'+len);
for (let i = 1; i < (len+1); i++) {
$('#tuku'+i).prop('src', alltuku[i-1]['pic']);
$('#title'+i).prop('value', alltuku[i-1]['title']);
$('#tuku'+i).prop('alt', alltuku[i-1]['id']);
$('#inputorder'+i).prop('value', alltuku[i-1]['orderby']);
$('#del_tuku'+i).show();

    }	
				}
            });
			
	//$('#file_upload').click(function () {
//$('#hiddenclick').val(1);
//};

//var button = document.getElementById("uploadifive-file_upload");
//button.addEventListener("click", function(e){
//alert("按钮被点击了!");
//});
<?php 

//$limit=5-$ii;
//echo "$('#limit').val(".$limit.");";
   
$timestamp=time();?>

//视频上传
	$('#file_upload_v').uploadifive({
				'auto'             : true,
				'checkScript'      : '?a=check_exists',
				'fileType'         : '.mp4,.3gp,.avi,.rm,.wav,.acc',
				'buttonText':'上传视频',
				'formData'         : {
									   'catid' : <?php echo $typeid>0?$typeid:0;?>,
									   'cpinfo_id' : 0,'is_catid' : 1,
									   //'timestamp' : '<?php echo $timestamp;?>',
									  // 'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
				                     },
				// 'queueSizeLimit':{$limit},
				 'queueSizeLimit':10,
				'queueID'          : 'fileQueue_v',//'queue'+{$v.id},
				'uploadScript'     : '{:U("uploadifive_v")}',
				'onUploadComplete' : function(file, response) {
$('#video').val(response);video_source
$('#video_source').attr('src',response);
$('#video_see').attr('src',response);
				}
			});
			
			


//多图上传
//if (window.performance.navigation.type !=2 ) {
			$('#file_upload').uploadifive({
				'auto'             : true,
				'async':false,
				'checkScript'      : '?a=check_exists',
				'fileType'         : '.jpg,.jpeg,.png,.gif,.webp',
				'formData'         : {
									   'catid' : '{$typeid}',
									   'cpinfo_id' : 0,
									   'isreturn' : window.performance.navigation.type,
									   'timestamp' : '<?php echo $timestamp;?>',
									   'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
				                     },
				// 'queueSizeLimit':{$limit},
				 'queueSizeLimit':4,
				'queueID'          : 'fileQueue',//'queue'+{$v.id},
				'uploadScript'     : '{:U("uploadifive")}',
				'onUploadComplete' : function(file, response2) {
				if(response2==0){
				show_alert('数量超限,部分上传失败');
				console.log(response2);
				}else{
				var response3 = JSON.parse(response2);
				var response= response3.pic;
				//console.log(response);
				//alert( response);
if($('#tuku1').attr('src') =='/Public/admin/images/nopic.png'){
$('#tuku1').prop('src', response);
$('#inputorder1').prop('value', response3.id);
$('#del_tuku1').show();
//alert('1插入完成:'+ $('#inputtuku1').val().length );
}else if
($('#tuku2').attr('src') =='/Public/admin/images/nopic.png'){
$('#tuku2').prop('src', response);
$('#inputorder2').prop('value', response3.id);
$('#del_tuku2').show();
}  else if
($('#tuku3').attr('src') =='/Public/admin/images/nopic.png'){
$('#tuku3').prop('src', response);
$('#inputorder3').prop('value', response3.id);
$('#del_tuku3').show();
} else if
($('#tuku4').attr('src') =='/Public/admin/images/nopic.png'){
$('#tuku4').prop('src', response);
$('#inputorder4').prop('value', response3.id);
$('#del_tuku4').show();
}  
//alert($('#copy{$v.id}').val(),);
//setTimeout("window.location.reload()", 1500 )
				//console.log(data);
//alert(1);
				}
				}
			});
			//}
		});
	
	
		 function change_order(id){
		var ids=$('#tuku'+id).attr('alt');
		var order=$('#inputorder'+id).val();
 $.post("{:U('change_order_tuku')}", {'ids':ids,'order':order}, function(v){
                if( v == 1 ){
                    show_alert('修改成功!');	
                }else{
				show_alert('失败');}
            });
	
}
			 function change_title(id){
		var ids=$('#tuku'+id).attr('alt');
		var title=$('#title'+id).val();
		//alert(ids); alert(title);
 $.post("{:U('change_title_tuku')}", {'ids':ids,'title':title}, function(v){
                if( v == 1 ){
                    show_alert('修改成功!');	
                }else{
				show_alert('失败');}
            });
	
}	    //删除
        function del_tuku(id2){
		//show_alert(kid);
          //  if(!confirm('删除后无法恢复,确定删除?'))
               url=$('#tuku'+id2).attr('src');
				id=$('#tuku'+id2).attr('alt');
				//alert(alt);
            $.post("{:U('del_tuku')}", {url:url,id:id}, function(v){
                if( v == 1 ){
                    show_alert('删除成功!');
                  $('#tuku'+id2).prop('src','__PUBLIC__/admin/images/nopic.png');
//$('#inputtuku'+id).prop('value', '');
$('#inputorder'+id2).prop('value', '');
$('#del_tuku'+id2).hide();
//更新上传数量的限制
//$('#limit').val(parseInt($('#limit').val())+1);
   // $('#file_upload').data('uploadifive').settings.formData = { 'queueSizeLimit': $('#limit').val()};   //动态更改formData的值

	//	$('#file_upload').uploadifive('upload');
		
                }else{
				show_alert('失败');}
            });
        } 

			</script>
			
            </div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/665262.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

打造高效上传体验:基于Kotlin的Android快速上传框架

1. 引言 在Android开发中&#xff0c;文件上传操作常常面临各种挑战&#xff0c;为此我开源了一个高效、易用的快速上传框架&#xff0c;助力开发者轻松实现文件上传功能。 GitHub项目地址: 点我 2. 框架特点概述 纯Kotlin编写&#xff1a;简洁、现代的编程语言。MVVM架构&a…

利用依赖结构矩阵管理架构债务

本文讨论了如何利用依赖结构矩阵&#xff08;DSM&#xff0c;Dependency Structure Matrix&#xff09;管理和识别架构债务&#xff0c;并通过示例应用展示了这一过程。原文: Managing Architecture Debt with Dependency Structure Matrix Vlado Paunovic Unsplash 技术债务&a…

Django ORM入门指南:从概念到实践,掌握模型创建、迁移与视图操作

系列文章目录 Django入门全攻略&#xff1a;从零搭建你的第一个Web项目Django ORM入门指南&#xff1a;从概念到实践&#xff0c;掌握模型创建、迁移与视图操作[Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解]还在写0.0… 文章目录 系…

中国青年汽车研发仿真建模大赛“汽车系统建模仿真与科学计算赛道”,邀您来赛!

近日&#xff0c;由中国青年创业就业基金会、国家新能源汽车技术创新中心共同主办&#xff0c;中国汽车研发软件产业创新联盟承办、苏州同元软控信息技术有限公司&#xff08;简称“同元软控”&#xff09;等企业协办的首届中国青年汽车研发仿真建模大赛启动仪式在北京经开区拉…

精选免费在线工具与资源推荐20240531

精选免费在线工具与资源推荐 引言 在互联网高速发展的今天&#xff0c;我们身处一个信息爆炸的时代。为了更好地应对工作和学习中的挑战&#xff0c;我们时常需要借助各种工具和资源来提高效率。幸运的是&#xff0c;网络上存在着大量免费且高效的在线工具和资源&#xff0c;…

【算法】模拟算法——Z字形变换(medium)

题解&#xff1a;模拟算法——Z字形变换(medium) 目录 1.题目2.题解3.参考代码4.总结 1.题目 题目链接&#xff1a;LINK 2.题解 利用模拟&#xff0c;来解决问题。 首先创建出一个O(numRows*n)的数组来&#xff0c;并按照题目要求把每个字符按顺序填进去。 这里以numRows…

【运维项目经历|026】Redis智能集群构建与性能优化工程

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…

学习网站地址汇总

本文用于记录学习路上遇到问题&#xff0c;各位大神的分享笔记&#xff0c;内容包括数据库的安装卸载&#xff0c;基础使用&#xff0c;sql语句编写&#xff0c;计算机网络知识等&#xff0c;属于知识大杂烩 1.动态行转列&#xff1a;https://www.cnblogs.com/gaizai/p/375329…

AquaCrop农业水资源管理,模拟作物生长过程中水分的需求与消耗

AquaCrop是由世界粮食及农业组织&#xff08;FAO&#xff09;开发的一个先进模型&#xff0c;旨在研究和优化农作物的水分生产效率。这个模型在全球范围内被广泛应用于农业水管理&#xff0c;特别是在制定农作物灌溉计划和应对水资源限制方面显示出其强大的实用性。AquaCrop 不…

S-RISE——解读人脸识别系统及其评估指标

1. 概述 过去十多年来&#xff0c;深度学习的突破性进展使图像识别任务&#xff08;如图像分类、物体检测和人脸识别&#xff09;取得了巨大进步。人脸识别技术的性能也有了显著提高&#xff0c;并吸引了全世界的关注&#xff0c;目前已被应用于移民控制和安防摄像头等多个领域…

了解m4s格式

正常在hls V7 和 DASH中都会使用m4s存放数据。他们使用fmp4的方式来存放信息&#xff1a; fmp4格式 &#xff1a; 一、hls V7介绍 1. 包含的文件&#xff1a; 2. prog_index.m3u8中 指明了 init.mp4与 上面各个.m4s文件的关系&#xff0c;具体内容为&#xff1a; 其中init.mp…

【期末速成】——计算机组成原理(1)概述

目录 一、什么是计算机的组成 二、冯诺依曼体系结构计算机的特点 三、计算机系统的层次结构 四、机器语言、汇编语言、高级语言, 五、 编译程序、解释程序、汇编程序 六、已知主频、CPI计算程序运行时间 一、什么是计算机的组成 计算机的组成可以分为五个部件和两个信息…

【C++ ——— 哈希】位图 | 布隆过滤器

文章目录 1、位图1.1位图概念 2.位图实现位图的应用1.一百亿个整数&#xff0c;设计算法找到只出现一次的整数?2.给两个文件&#xff0c;分别有一百亿个整数&#xff0c;我们只有1G内存该如何找到两个文件的交集&#xff1f;3.位图应用变形&#xff1a;一个文件有100亿个int&a…

什么是数据资产管理?数据资产管理包括了哪些内容?

数据资产管理包括数据模型管理、数据标准管理、数据质量管理等 10 个活动职能&#xff0c;覆盖数据资源化、数据资产化两个阶段。本章参考 PDCA 方法&#xff0c;从计划、执行、检查、改进四个环节着手&#xff0c;阐述数据资产管理活动职能的核心理念与实践要点。 一、数据模型…

RedisTemplate实战应用--队列等

一、RedisTemplate队列插入 1、从集合左边插入值 https://blog.csdn.net/weixin_43658899/article/details/121040307 leftPush(K key, V value) redisTemplate.opsForList().leftPush("leftdatakey","bbbb");2、从集合左边开始在v1值后边插入新值v2 le…

SG7050EEN差分晶体振荡器:为5G路由器提供卓越的时钟源

随着5G技术的快速发展&#xff0c;5G路由器作为连接高速网络的重要设备&#xff0c;正迅速普及。为了确保5G路由器在高宽带和低延迟的网络环境中表现出色&#xff0c;选择一款高性能的晶体振荡器至关重要。爱普生推出的SG7050EEN差分晶体振荡器&#xff0c;以其高精度、低相位噪…

Three.js 研究:4、创建设备底部旋转的科技感圆环

1、实现效果 2、PNG转SVG 2.1、原始物料 使用网站工具https://convertio.co/zh/png-svg/进行PNG转SVG 3、导入SVG至Blender 4、制作旋转动画 4.1、给圆环着色 4.2、修改圆环中心位置 4.3、让圆环旋转起来 参考一下文章 Three.js 研究&#xff1a;1、如何让物体动起来 Thre…

Java | Leetcode Java题解之第120题三角形最小路径和

题目&#xff1a; 题解&#xff1a; class Solution {public int minimumTotal(List<List<Integer>> triangle) {int n triangle.size();int[] f new int[n];f[0] triangle.get(0).get(0);for (int i 1; i < n; i) {f[i] f[i - 1] triangle.get(i).get(i…

2024新版二开微信发卡小程序源码卡密系统流支持量主

2024新版二开微信发卡小程序源码卡密系统流支持量主。裂变扩展多种领取模式二次开发的发卡小程序源码&#xff0c;其后台采用PHP编写&#xff0c;支持用户通过付费购卡或者观看视频广告领取卡密&#xff0c;该小程序还支持流量主&#xff0c;因为功能需要&#xff0c;我就进行了…

汇舟问卷:国外问卷调查两小时赚28美金?

现在的年轻人不愿意打工的原因不只是因为累&#xff0c;而且赚的钱也不多。有些人开玩笑地说&#xff0c;摆个摊儿卖点小商品都比上班赚得多&#xff0c;这确实是事实。 打工只能勉强维持生计&#xff0c;不能致富。因此&#xff0c;如果我们想赚大钱&#xff0c;首先需要改变…