功能预览,他依赖jq插件,请自已引入
类似这样
html
<script type="text/javascript" src="/Application/Admin/Static/js/jquery-2.0.3.min.js"></script>一,前端模板代码
javascript
<!--多图功能-->
<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>二,前端控制器代码
php
$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
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;四,后台控制器
php
//单列内容列表
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;
}
}五,后台模板
javascript
<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>