基于webupload的帝国cms后台多图集H5上传插件

一款基于webupload的帝国cms后台多图集H5上传插件。

使用方法：

1、将webupload文件放到/e/extend/目录下

2、新建字段uploadimg，将下面的代码放入“输入表单替换html代码”中

3、修改一下两个文件

打开/e/class/qinfofun.php文件找到

if($f=="morepic")//图片集

在下面放入代码

elseif($f=='uploadimg')
       {
        $add_temp = array(
             'msmallpic' => $add['msmalluploadimg'],
             'mbigpic'   => $add['mbiguploadimg'],
             'mpicname'  => $add['muploadimgname'],
             'mdelpicid' => $add['mdeluploadimgid'],
             'mpicid'    => $add['muploadimgid'],
             'mpicurl_qz'=> $add['muploadimgurl_qz'],
             'msavepic'  => $add['msaveuploadimg'],
             'mcreatespic'=> $add['mcreatesuploadimg'],
             'msmallpfile'=> $add['msmalluploadimgfile'],
             'mbigpfile'=> $add['mbiguploadimgfile'],
        );
        //设置_FIELS
        $_FILES['msmallpfile'] = $_FILES['msmalluploadimgpfile'];
        $_FILES['mbigpfile'] = $_FILES['mbiguploadimgpfile'];
        $add = array_merge($add,$add_temp);
        $value=ReturnMorepicpath($add['msmallpic'],$add['mbigpic'],$add['mpicname'],$add['mdelpicid'],$add['mpicid'],$add,$add['mpicurl_qz'],1,0,intval($add['fstb']));
    }

打开/e/class/functions.php文件找到

elseif($f=="morepic")//图片集

在下面放入代码（总共两个位置分别放入）

elseif($f=='uploadimg')
               {
                $add_temp = array(
                     'msmallpic' => $add['msmalluploadimg'],
                     'mbigpic'   => $add['mbiguploadimg'],
                     'mpicname'  => $add['muploadimgname'],
                     'mdelpicid' => $add['mdeluploadimgid'],
                     'mpicid'    => $add['muploadimgid'],
                     'mpicurl_qz'=> $add['muploadimgurl_qz'],
                     'msavepic'  => $add['msaveuploadimg'],
                     'mcreatespic'=> $add['mcreatesuploadimg'],
                     'msmallpfile'=> $add['msmalluploadimgpfile'],
                     'mbigpfile'=> $add['mbiguploadimgpfile'],
                );
                //设置_FIELS
                $_FILES['msmallpfile'] = $_FILES['msmalluploadimgpfile'];
                $_FILES['mbigpfile'] = $_FILES['mbiguploadimgpfile'];
                $add = array_merge($add,$add_temp);
                $value=ReturnMorepicpath($add['msmallpic'],$add['mbigpic'],$add['mpicname'],$add['mdelpicid'],$add['mpicid'],$add,$add['mpicurl_qz'],1,0,intval($add['fstb']));
 
            }

最后新建好文章的图集字段 字段命名为[ uploadimg ]

<link rel="stylesheet" type="text/css" href="<?=$public_r[newsurl]?>e/extend/webupload/webuploader.css" />
<link rel="stylesheet" type="text/css" href="<?=$public_r[newsurl]?>e/extend/webupload/style.css" />
<script type="text/javascript" src="<?=$public_r[newsurl]?>e/extend/webupload/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    var mys="<?=$public_r[newsurl]?>e/extend/webupload/up.php";
    var myfileNumLimit=5;
    var myformData={'classid':'<?=$classid?>','filepass':'<?=$filepass?>'};
</script>
<div id="wrapper">
    <div id="container">
        <div id="uploader">
            <div class="queueList">
                <div id="dndArea" class="placeholder<?=$r[uploadimg]?' element-invisible':''?>">
                    <div id="filePicker"></div>
                    <p>点击选择图片，单次最多可选5张</p>
                </div>
                <ul class="filelist" id="filelist0">
                    <?
                    if($r[uploadimg])
                    {
                        $r['uploadimg']=stripSlashes($r[uploadimg]);
                        $picarr=explode("\r\n",$r[uploadimg]);
                        $count=count($picarr);
                        for($i=0;$i<$count;$i++)
                        {
                            $j=$i+1;
                            $pic=explode("::::::",$picarr[$i]);
                            $checked=$pic[0]==$r[titlepic]?'checked':'';
                            $uploadimg.='<li class="delpic courseList">
                                <p class="title">'.$pic[2].'</p>
                                <p class="imgWrap"><img style="width:120px; height:90px;" src="'.$pic[0].'"><input type="hidden" name="mbiguploadimg[]" value="'.$pic[1].'" /><input type="hidden" name="msmalluploadimg[]" value="'.$pic[0].'" /><input type="text" id="muploadimgname" name="muploadimgname[]" value="'.$pic[2].'" /></p>
                                <div class="file-panel"><input type="radio" value="'.$pic[1].'" '.$checked.' name="setTitlepic" class="setTitlepic" />设为封面</div>
                                <span class="cancel">删除</span>
                                <div class="moveud"><a class="moveUpBtn" href="javascript:;"><</a><a class="moveDownBtn" href="javascript:;">></a></div>
                            </li>';
                        }
                    }
                    echo $uploadimg;
                    ?>
                    <script>
                    //设置封面
                    $(document).on('click', '.setTitlepic', function(){
                        titlepic=$(this).val();
                        $("#titlepic").val(titlepic);
                    });
                    //动态删除DOM添加的图片
                    $(document).on('click', 'span.cancel', function(){
                        $(this).parents('.courseList').remove();
                    });
                    //静态DOM设置封面
                    $(document).on('click', '.setTitlepic', function(){
                        titlepic=$(this).val();
                        $("#titlepic").val(titlepic);
                    });
                    //静态删除DOM添加的图片
                    $(document).on('click', 'span.cancel', function(){
                        $(this).parents('.courseList').remove();
                    });
                     
                    $(document).on('click', '.moveDownBtn', function(){
                        //判断是否有下一个节点
                        if($(this).parents('.courseList').nextAll().length > 0){
                            $(this).parents('.courseList').next().after($(this).parents('.courseList').prop('outerHTML'));
                            $(this).parents('.courseList').remove();
                        }
                        }).on('click', '.moveUpBtn', function(){
                        //判断是否有上一个节点
                        if($(this).parents('.courseList').prevAll().length > 0){
                            $(this).parents('.courseList').prev().before($(this).parents('.courseList').prop('outerHTML'));
                            $(this).parents('.courseList').remove();
                        }
                    })
                     
                    </script>                 
                </ul>
            </div>
            <div class="statusBar" style="<?=$r[uploadimg]?'':'display:none;'?>">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div>
                <div class="btns">
                    <div class="uploadBtn">开始上传</div>
                    <div id="filePicker2"></div>
                </div>
                <div class="info"></div>
            </div>             
        </div>
    </div>
</div>
<script type="text/javascript" src="<?=$public_r[newsurl]?>e/extend/webupload/webuploader.min.js"></script>
<script type="text/javascript" src="<?=$public_r[newsurl]?>e/extend/webupload/upload.js"></script>
<script type="text/javascript">
$(function(){
    $("#filelist1").html($("#filelist0").html());
    $("#filelist0").remove();
})
</script>