TP5+bootstrap管理后台,多张图片上传应用

                       TP5+bootstrap管理后台,多张图片上传应用

       最近项目管理后台要整改,这过程遇到多张图片上传,查了很多资料,都是晕了,后来找到解决方案。以下代码已测试成功;

      1、首先,商品上传多张图片,不能和商品其他信息一起表单提交。那么只能用jQuery来提交,但是jQuery的$.post{}和$.ajax提交不能提交文件(视频、图片)。那其中之一的解决方案就是用 jquery.form.js  提交表单。

     2、 jquery.form.js的引用、原理、下载,我就不说了。网上很多资料。记得和jQuery.js一起引用。我用到了ajaxSubmit;

    3、功能:上传多张图片可以删除,可以图片交换顺序。删除文件时是删除源文件,源文件删除前要判断是否存在,还有屏蔽错误,以免导致程序报错,无法运行;

    案例如下:HTML代码:

<div class="space-4"></div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right">图集</label>
        <div class="col-sm-9 upload_imgs">
            <div class="file_input col-sm-5">
                <input type="file" name="file[]" multiple="multiple" class="input-img" >
                <input type="hidden" value="" name="atlas" class="atlas_id">
            </div>
            <div class="btn-img-upload">上传</div>
            <div class="imglist">
                <ul>
                    {notempty name="info['imglist']"}
                    {volist name="$info['imglist']" id="vo"}
                    <li id="{$vo.id}">
                                <span class="edit_pic_mask">
                                    <i class="fa fa-arrow-circle-left" onclick="leftShiftImage(this)"></i>
                                    <i class="fa fa-trash" onclick="removeImaged(this)"></i>
                                    <i class="fa fa-arrow-circle-right" onclick="rightShiftImage(this)"></i>
                                </span>
                        <img src="{$vo.url}" alt="" width="100%" height="100%">
                    </li>
                    {/volist}
                    {/notempty}
                </ul>
            </div>
            <span class="warning">&nbsp;* &nbsp;&nbsp;图片最大上传 2M ,图片格式允许上传 jpg、png、gif;</span>
        </div>
    </div>

js代码:

//点击上传图片
$(".btn-img-upload").click(function(){
    var idlist=new Array();
    $(".imglist ul li").each(function(){
        var idl=$(this).attr('id');
        idlist.push(idl);
    });
    var pagUrl = URL + "Admin/File/uploadImage";
    $("#myfromd").ajaxSubmit({
        url: pagUrl,
        data:{idlist:idlist},
        type: 'post',
        success: function(data) {
            if (data['code'] == 200) {
                var htmls='';
                for(var i=0;i<data['data'].length;i++){
                    htmls=htmls+"<li id='"+data['data'][i]['id']+"'><img src='"+data['data'][i]['url']+"' alt='' width='100%' height='100%'>";
                    htmls=htmls+"<span class='edit_pic_mask'><i class='fa fa-arrow-circle-left' onclick='leftShiftImage(this)'></i><i class='fa fa-trash' onclick='removeImaged(this)'></i><i class='fa fa-arrow-circle-right' onclick='rightShiftImage(this)'></i></span></li>";
                }
                $('.imglist ul').html(htmls);
                $('.imglist').css('display','block');
                idLsit();
                $(".imglist ul li").mouseover(function(){
                    var rer=$(this).children('span').css('display','block');
                });
                $(".imglist ul li").mouseout(function(){
                    var rer=$(this).children('span').css('display','none');
                });
            }else{
                layer.msg(data['msg'],{
                    icon: 2,//提示的样式
                    time: 2000 //2秒关闭(如果不配置,默认是3秒)//设置后不需要自己写定时关闭了,单位是毫秒
                });
            }
        },error : function(){
            layer.msg('链接失败',{
                icon: 2,//提示的样式
                time: 2000 //2秒关闭(如果不配置,默认是3秒)//设置后不需要自己写定时关闭了,单位是毫秒
            });
        }
    });
});

//获取
function idLsit(){
    var idlist=new Array();
    $(".imglist ul li").each(function(){
        var idl=$(this).attr('id');
        idlist.push(idl);
    });
    $('.atlas_id').val('');
    $('.atlas_id').val(idlist);
    if(idlist.length == 0){
        $('.imglist').css('display','none');
    }else{
        $('.imglist').css('display','block');
    }
}

//删除图片
function removeImaged(e){
    var pagUrl = URL + "Admin/File/delImage";
    var imgID=$(e).parent().parent().attr('id');
    var fromid=$('#fromid').val();
    $.post(pagUrl,
            {img_id:imgID,fromid:fromid},
            function(data,status){
                if(data['code'] == 200){
                    $(e).parent().parent().remove();
                    idLsit();
                }else{
                    layer.msg('删除失败',{
                        icon: 2,//提示的样式
                        time: 2000 //2秒关闭(如果不配置,默认是3秒)//设置后不需要自己写定时关闭了,单位是毫秒
                    });
                }
            });
}

//图片左移
function leftShiftImage(e){
    if($(e).parent().parent().prev()){
        $(e).parent().parent().prev().before($(e).parent().parent());
        idLsit();
    }
}

//图片右移
function rightShiftImage(e){
    if($(e).parent().parent().next()){
        $(e).parent().parent().next().after($(e).parent().parent());
        idLsit();
    }
}

PHP(TP5):代码

 //多张图片删除
    public function delImage()
    {
        $data=input();
        $fileId=$data['img_id'];
        $fromid=$data['fromid'];
        if($fileId && $fromid){
            $result=deleteFile($fileId);
            if($result){
                $cased=db('cased')->field('atlas')->where('id='.$fromid)->find();
                if($cased['atlas']){
                    $arropp=explode(',',$cased['atlas']);
                    foreach($arropp as $keys => $vals ){
                        if($vals == $fileId){
                            unset($arropp[$keys]);
                        }
                    }
                    $filelist=db('cased')->where('id='.$fromid)->update(array('atlas'=>implode(',',$arropp)));
                    if($filelist){
                        return array('code'=>200);
                    }else{
                        return false;
                    }
                }
            }else{
                return false;
            }
        }
    }

     //多张图片上传
    public function uploadImage()
    {
        $data=input();
        if($data['idlist']){
            $arrData=$data['idlist'];
        }else{
            $arrData=array();
        }
        $idList=$this->upload($arrData);
        if($idList['code'] == 300){
            return array('code'=>300,'msg'=>'请按要求上传图片');
        }elseif($idList['code'] == 200){
           foreach($idList['data'] as $key =>$value){
               if($value){
                   $filelist=db('file')->field('savename,savepath')->where('id='.$value)->find();
                   $arr['id']=$value;
                   $arr['url']="/project/Public/Uploads/".$filelist['savepath'].$filelist['savename'];
               }
               if($arr){
                   $idData[]=$arr;
                   $arr=array();
               }
           }
            return array('code'=>200,'data'=>$idData);
        }else{
            return array('code'=>300,'msg'=>'请上传图片');
        }
    }
/*图片上传(多文件)
*$arrData图片id数组
*/
public function upload($arrData){
    $files = request()->file('file');
    if($files){
        foreach($files as $file) {
            $info = $file->validate(['size' => '2097152', 'ext' => 'jpg,png,gif'])->move(DOC_ROOT . '/public/uploads/');//最大2M
            if ($info) {
                 $saveName = $info->getFilename();//图片
                 $path = date("Ymd")."/";
                 $Datalist=array(
                     'savename'=>$saveName,
                     'savepath'=>$path,
                     'ctime'=>time(),
                     'shop_id'=>session('shopid')
                 );
                  db('file')->insert($Datalist);
                  $file_id=db('file')->getLastInsID();
                  if($arrData){
                      array_push($arrData,$file_id);
                  }else{
                      $arrData[]=$file_id;
                  }
            }else{
                return array('code'=>300);
            }
        }
        return array('code'=>200,'data'=>$arrData);
    }else{
        return array('code'=>400);
    }
}
/*图片、视频源文件删除
    *返回true,false
    * $id  图片id
    */
function deleteFile($id){
    $fileList=db('file')->field('id,savename,savepath')->where('id='.$id)->find();
    if($fileList['id']){
        $url=COM_IMG_PATH.$fileList['savepath'].$fileList['savename'];
        $fileResult=file_check($url);
        if($fileResult){
            $detele_file=DOC_ROOT."/Public/Uploads/".$fileList['savepath'].$fileList['savename'];
            $result=unlink($detele_file);
            if($result){
                $list=db('file')->where('id='.$id)->delete();
                if($list){
                    return true;//删除成功
                }else{
                    return false;
                }
            }else{
                return false;
            }
        }else{
            $list=db('file')->where('id='.$id)->delete();
            if($list){
                return true;//删除成功
            }else{
                return false;
            }
        }
    }else{
        return false;
    }
}

 

/*图片、视频源文件删除前判断是否存在
    *返回true,false
    * $url 文件路径   http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/logo-domain-green3.png
    */
function file_check($url){
    //屏蔽域名不存在等访问问题的警告
    error_reporting(E_ALL ^ (E_WARNING|E_NOTICE));
    $remote_file =$url ;
    $header = get_headers($remote_file,true);
    return(isset($header[0]) && (strpos($header[0], '200') || strpos($header[0], '304')));
}

 

记得PHP中有些常量要换成你自己的定义的;有不懂得可以交流;

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值