Layui上传多图编辑

傷城~ 2021-09-08 17:18 427阅读 0赞

@extends('admin.default')  
@section('admin')  
<link href="/client/layui/css/layui.css" rel="stylesheet"/>  
<script src="/client/layui/layui.js" charset="utf-8"></script>

<div class="admin-content">  
        <div class="admin-content-body">  
            <div class="am-cf am-padding am-padding-bottom-0">  
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">礼品修改</strong>  
                </div>  
            </div>  
            <hr>  
            <div class="am-tabs am-margin" data-am-tabs>  
                <ul class="am-tabs-nav am-nav am-nav-tabs">  
                    <li class="am-active"><a href="\#tab1">礼品修改</a></li>  
                </ul>  
                <div class="am-tabs-bd">  
                    <div class="am-tab-panel am-fade am-in am-active" id="tab1">  
                        <form class="am-form" method="post" id='myForm' action="" enctype="multipart/form-data">  
                            \{!! csrf\_field() !!\}  
                            <input type="hidden" class="am-input-sm" id='goods\_id' name="id" value="\{ \{$data\['list'\]\['id'\]\}\}">

<div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">  
                                    <span>礼品名称</span>  
                                </div>  
                                <div class="am-u-sm-8 am-u-md-4">  
                                    <input type="text" class="am-input-sm" name="name" value="\{ \{$data\['list'\]\['name'\]\}\}">  
                                </div>  
                                <div class="am-hide-sm-only am-u-md-6">\*必填，不可重复</div>  
                            </div>  
                            \{ \{--所属类别--\}\}  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">所属礼品分类</div>  
                                <div class="am-u-sm-8 am-u-md-10">  
                                    <select data-am-selected="\{btnSize: 'sm'\}" name="goods\_type\_id" id="goods\_type\_id">  
                                        <option value="0">请选择礼品分类</option>  
                                        @if(count($goodstype)>0)  
                                            @foreach($goodstype as $v)  
                                                <option value="\{ \{$v\['id'\]\}\}" @if($data\['list'\]\["goods\_type\_id"\]==$v\['id'\]) selected @endif>\{ \{$v\['name'\]\}\}</option>  
                                            @endforeach  
                                        @endif  
                                    </select>  
                                </div>

</div>  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">  
                                    <span>所需积分</span>  
                                </div>  
                                <div class="am-u-sm-8 am-u-md-4">  
                                    <input type="text" class="am-input-sm" name="points" value="\{ \{$data\['list'\]\['points'\]\}\}">  
                                </div>  
                                <div class="am-hide-sm-only am-u-md-6"></div>  
                            </div>  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">  
                                    <span>市场价</span>  
                                </div>  
                                <div class="am-u-sm-8 am-u-md-4">  
                                    <input type="text" class="am-input-sm" name="market\_price" value="\{ \{$data\['list'\]\['market\_price'\]\}\}">  
                                </div>  
                                <div class="am-hide-sm-only am-u-md-6"></div>  
                            </div>  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">  
                                    <span>库存</span>  
                                </div>  
                                <div class="am-u-sm-8 am-u-md-4">  
                                    <input type="text" class="am-input-sm" name="total\_num" value="\{ \{$data\['list'\]\['total\_num'\]\}\}">  
                                </div>  
                                <div class="am-hide-sm-only am-u-md-6"></div>  
                            </div>  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">  
                                    <span>基础销量（虚构的）</span>  
                                </div>  
                                <div class="am-u-sm-8 am-u-md-4">  
                                    <input type="text" class="am-input-sm" name="base\_num" value="\{ \{$data\['list'\]\['base\_num'\]\}\}">  
                                </div>  
                                <div class="am-hide-sm-only am-u-md-6"></div>  
                            </div>  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">  
                                    <span>展示排序</span>  
                                </div>  
                                <div class="am-u-sm-8 am-u-md-4">  
                                    <input type="text" class="am-input-sm" name="sort" value="\{ \{$data\['list'\]\['sort'\]\}\}">  
                                </div>  
                                <div class="am-hide-sm-only am-u-md-6"></div>  
                            </div>  
                            \{ \{--所属类别--\}\}  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">是否上架</div>  
                                <div class="am-u-sm-8 am-u-md-10">  
                                    <select data-am-selected="\{btnSize: 'sm'\}" name="on\_sale" id="on\_sale">  
                                        <option value="0" @if($data\['list'\]\["on\_sale"\]==0) selected @endif>否</option>  
                                        <option value="1" @if($data\['list'\]\["on\_sale"\]==1) selected @endif>是</option>  
                                    </select>  
                                </div>

</div>  
                            \{ \{--展示图片--\}\}  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">展示图片</div>  
                                <div class="am-u-sm-8 am-u-md-10">  
                                    <div id='show\_img\_div' @if($data\['list'\]\["show\_img"\]=='') style='display: none;' @endif>  
                                        <img id="preview-img" src="/\{ \{$data\['list'\]\['show\_img'\]\}\}" width="80" height="80">  
                                    </div>  
                                    <div id="uploader" class="wu-example">  
                                          
                                        <div id="thelist" class="uploader-list"></div>  
                                        <div class="btns">  
                                            <input type="file" name="show\_img" id="show\_img" class="form-control" οnchange="selectFile(this)">  
                                        </div>  
                                    </div>  
                                </div>

</div>  
                            \{ \{--轮播图片--\}\}  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">轮播图片</div>  
                                <div class="am-u-sm-8 am-u-md-10">  
                                    <div class="layui-upload">  
                                      <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>   
                                      <div class="layui-upload-list">  
                                        <table class="layui-table">  
                                          <thead>  
                                            <tr><th>文件名</th>  
                                            <th>图像</th>  
                                            <th>状态</th>  
                                            <th>操作</th>  
                                          </tr></thead>  
                                          <tbody id="demoList">  
                                              @if ($imgall != '')  
                                                  @foreach ($imgall as $v)  
                                                      <tr id="upload-\{ \{$v\}\}">  
                                                      <td>\{ \{$v\}\}</td>  
                                                      <td><img style="width:50px;height:50px;" src="/\{ \{$v\}\}"></td>  
                                                      <td><span style="color: \#5FB878;">上传成功</span><input type="hidden" name="imageUrl\[\]" value="\{ \{$v\}\}" /></td>  
                                                      <td>  
                                                          <button type="button" class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>  
                                                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>  
                                                      </td>  
                                                    </tr>  
                                                @endforeach  
                                            @endif  
                                            
                                          </tbody>  
                                        </table>  
                                      </div>  
                                      <button type="button" class="layui-btn" id="testListAction">开始上传</button>  
                                    </div>  
                                </div>  
                            </div>  
                              
                              
                              
                              
                            \{ \{--内容描述--\}\}  
                            <div class="am-g am-margin-top-sm">  
                                <div class="am-u-sm-12 am-u-md-2 am-text-right admin-form-text">  
                                    内容描述  
                                </div>  
                                <div class="am-u-sm-12 am-u-md-10">  
                                  
                                    <script id="goods\_des" name="goods\_des" type="text/plain"  
                                            style="width:650px;height:300px;"></script>  
                                      
                                    <script type="text/javascript"  
                                            src="\{ \{ URL::asset('/ueditor/ueditor.config.js')\}\}"></script>  
                                      
                                    <script type="text/javascript"  
                                            src="\{ \{ URL::asset('/ueditor/ueditor.all.js')\}\}"></script>

</div>  
                            </div>  
                              
                            <div class="am-g am-margin-top">

<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">  
                                    <script id="video" name="video" type="text/plain"  
                                            style="width:350px;height:300px;"></script>  
                                      
                                    <script type="text/javascript">  
                                        var ue = UE.getEditor('goods\_des');  
                                        ue.ready(function () \{  
                                            ue.setContent('\{!!$data\["list"\]\["goods\_des"\]!!\}');  
                                        \});  
                                    </script>  
                                </div>  
                            </div>

<div class="am-margin">  
                                <button type="button" οnclick='commitSave()' class="am-btn am-btn-primary am-btn-xs">提交保存</button>  
                                <button type="button" class="am-btn am-btn-default am-btn-xs"  
                                        οnclick="JavaScript:history.back();">返回列表  
                                </button>  
                            </div>  
                        </form>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <script>  
    function commitSave() \{  
        var formData = new FormData($("\#myForm")\[0\]);  
        $.ajax(\{  
            type : "POST",  
            url : '\{ \{route("client\_goods\_update")\}\}',  
            data : formData,  
            async : true,  
            cache: false,  // 不缓存  
            processData: false,   // jQuery不要去处理发送的数据  
            contentType: false,  // jQuery不要去设置Content-Type请求头  
            dataType : 'json',  
            error : function(data) \{  
                layer.msg('请求失败', \{  
                    icon : 5  
                \});  
                return false;  
            \},  
            success : function(data) \{  
                if (data.code == 1) \{  
                    layer.msg('修改成功', \{  
                        icon : 6,  
                        time : 2000  
                    \}, function() \{  
                        window.location.href = '\{ \{route("client\_goods")\}\}';  
                    \});  
                \} else \{  
                    layer.msg(data.msg, \{  
                        icon : 5  
                    \});  
                \}  
            \}  
        \});  
    \}

//json的length   
    function getJsonLength(jsonData)\{  
        var jsonLength = 0;  
        for(var item in jsonData)\{  
          jsonLength++;  
        \}  
        return jsonLength;  
      \}  
      
    layui.use('upload', function()\{  
        var $ = layui.jquery  
        ,upload = layui.upload;  
          
        //图片删除  
        $('.demo-delete').click(function()\{  
              var goods\_id = $('\#goods\_id').val();  
            var imageObj = $($(this)).parent().parent();  
            var image\_url = imageObj.find('input\[type="hidden"\]').val();  
            $.post(  
                "\{ \{route('client\_goods\_delete\_old\_image')\}\}",  
                \{goods\_id:goods\_id,image\_url:image\_url\},  
                function(data)\{  
                    imageObj.empty();  
                \},  
                'json'  
          );  
        \});  
          
        //多文件列表示例  
        var demoListView = $('\#demoList')  
        ,uploadListIns = upload.render(\{  
          elem: '\#testList'  
          ,url: "\{ \{route('client\_goods\_upload\_image')\}\}"  
          ,accept: 'file'  
          ,multiple: true  
          ,auto: false  
          ,bindAction: '\#testListAction'  
          ,choose: function(obj)\{     
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列  
            var len = getJsonLength(files);  
            var trlen = $('input\[name="imageUrl\[\]"\]').length;  
            //读取本地文件  
            obj.preview(function(index, file, result)\{  
                if (parseInt(len) + parseInt(trlen) > 6)\{  
                    layer.msg("轮播图片不能超过6张");  
                        //遍历  
                        $.each(files,function(\_key)\{  
                          var key = \_key;  
                          var value = files\[\_key\];  
                          if(\_key == index)  
                          \{ //删除  
                            delete files\[\_key\];  
                          \}  
                        \});  
                \}else\{  
                    var tr = $(\['<tr id="upload-'+ index +'">'  
                          ,'<td>'+ file.name +'</td>'  
                          ,'<td></td>'  
                          ,'<td>等待上传</td>'  
                          ,'<td>'  
                            ,'<button type="button" class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'  
                            ,'<button type="button" class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'  
                          ,'</td>'  
                        ,'</tr>'\].join(''));  
                          
                        //单个重传  
                        tr.find('.demo-reload').on('click', function()\{  
                          obj.upload(index, file);  
                        \});  
                          
                        //删除  
                        tr.find('.demo-delete').on('click', function()\{  
                            var image\_url = $($(this)).parent().parent().find('input\[type="hidden"\]').val();  
                            $.post(  
                                "\{ \{route('client\_goods\_delete\_image')\}\}",  
                                \{image\_url:image\_url\},  
                                function(data)\{  
                                    delete files\[index\]; //删除对应的文件  
                                    tr.remove();  
                                    uploadListIns.config.elem.next()\[0\].value = ''; //清空 input file 值，以免删除后出现同名文件不可选  
                                \},  
                                'json'  
                          );  
                            
                        \});  
                          
                        demoListView.append(tr);  
                \}  
            \});  
          \}  
          ,done: function(res, index, upload)\{  
              console.log(res)  
            if(res.code == 0)\{ //上传成功  
              var tr = demoListView.find('tr\#upload-'+ index)  
              ,tds = tr.children();  
              tds.eq(1).html('<img style="width:50px;height:50px;" src="/'+res.image\_url+'">');  
              tds.eq(2).html('<span style="color: \#5FB878;">上传成功</span><input type="hidden" name="imageUrl\[\]" value="'+res.image\_url+'" />');  
              //tds.eq(3).html(''); //清空操作  
              tds.eq(3).find('.demo-reload').addClass('layui-hide');  
              return delete this.files\[index\]; //删除文件队列已经上传成功的文件  
            \}  
            this.error(index, upload);  
          \}  
          ,error: function(index, upload)\{  
            var tr = demoListView.find('tr\#upload-'+ index)  
            ,tds = tr.children();  
            tds.eq(2).html('<span style="color: \#FF5722;">上传失败</span>');  
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传  
          \}  
        \});  
      \});

function checkForm() \{  
            var name = $("\[name='name'\]").val();  
            if (!name) \{  
                layer.msg("分类名称必填");  
                return false;  
            \}  
        \}

function ImgRemoveold(obj)\{  
            var arr = \[\];  
            var oldimgurl = $('\#oldimgall').val();  
            if(oldimgurl != '')\{  
                arr.push(oldimgurl);  
            \}  
            arr.push($(obj).attr('data-imgurl'));  
            $('\#oldimgall').val(arr.join(';'))  
            $(obj).parent().remove();  
        \}

</script>  
@stop

public function upload\_image(Request $request)\{  
        $file = $request->file('file');  
        if(isset($file) && !empty($file))\{  
            $showImg = $this->upload($file);  
            if($showImg)\{  
                $data\['image\_url'\] = $showImg;  
                $data\['add\_time'\] = date('Y-m-d H:i:s');  
                DB::table('client\_temp\_img')->insert($data);  
                return response()->json(\['code' => '0', 'image\_url' => $showImg\], 200, \[\], JSON\_UNESCAPED\_UNICODE);  
            \}else\{  
                return response()->json(\['code' => '1', 'image\_url' => ''\], 200, \[\], JSON\_UNESCAPED\_UNICODE);  
            \}  
        \}else\{  
            return response()->json(\['code' => '1', 'image\_url' => ''\], 200, \[\], JSON\_UNESCAPED\_UNICODE);  
        \}  
    \}  
    public function delete\_image(Request $request)\{  
        $image\_url = $request->get('image\_url','');  
        if($image\_url != '')\{  
            @unlink('./'.$image\_url);  
            DB::table('client\_temp\_img')->where("image\_url",$image\_url)->delete();  
        \}  
        return response()->json(\['code' => '0', 'image\_url' => ''\], 200, \[\], JSON\_UNESCAPED\_UNICODE);  
    \}  
      
    public function delete\_old\_image(Request $request)\{  
        $goods\_id = $request->get('goods\_id','');  
        $image\_url = $request->get('image\_url','');  
        $info = GoodsModel::find($goods\_id);  
        $arr = explode(';', $info->img\_all);  
        $newarr = \[\];  
        foreach ($arr as $k=>$v )\{  
            if($v == $image\_url)\{  
                @unlink('./'.$image\_url);  
            \}else\{  
                $newarr\[\] = $v;  
            \}  
        \}  
        $str = implode(';', $newarr);  
        GoodsModel::where('id',$goods\_id)->update(\['img\_all'=>$str\]);  
        return response()->json(\['code' => '0', 'image\_url' => ''\], 200, \[\], JSON\_UNESCAPED\_UNICODE);  
    \}  
      
    //单图上传  
    private function upload($file)\{  
        if (!$file->isValid()) \{  
            return false;  
        \}  
        $allowed\_extensions = \["png", "jpg","jpeg","gif"\];  
        if ($file->getClientOriginalExtension() && !in\_array($file->getClientOriginalExtension(), $allowed\_extensions)) \{  
            return false;  
        \}  
        $entension = $file -> getClientOriginalExtension(); //  上传文件后缀  
        $filename = date('YmdHis').mt\_rand(1000,9999).'.'.$entension;  // 重命名图片  
        $date = date('Y-m-d');  
        $path = $file->move(public\_path().'/uploads/'.$date.'/',$filename);  // 重命名保存  
        $img\_path = 'uploads/'.$date.'/'.$filename;  
        return $img\_path;  
    \}