layui上传多图添加

心已赠人 2021-09-08 17:16 332阅读 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="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() !!\}  
                              
                            <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">  
                                </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'\]\}\}">\{ \{$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">  
                                </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">  
                                </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">  
                                </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">  
                                </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">  
                                </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">否</option>  
                                        <option value="1">是</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' style='display: none;'>  
                                        <img id="preview-img" src="" 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"></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">  
                                \{ \{--<textarea rows="10" placeholder="请使用富文本编辑插件"></textarea>--\}\}  
                                  
                                    <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');  
                                          
                                    </script>  
                                </div>  
                            </div>

</div>  
                </div>  
            </div>

</div>  
    </div>  
    <script type="text/javascript">  
    function commitSave() \{  
        var formData = new FormData($("\#myForm")\[0\]);  
        $.ajax(\{  
            type : "POST",  
            url : '\{ \{route("client\_goods\_create")\}\}',  
            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;

//多文件列表示例  
        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 layui-btn-danger demo-delete">删除</button>'  
                              ,'</td>'  
                            ,'</tr>'\].join(''));  
                              
                              //删除  
                            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)\{  
            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'); //显示重传  
          \}  
        \});  
      \});

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;  
    \}