Layui上传多图编辑

最新推荐文章于 2022-10-31 11:22:45 发布

梅坞茶坊

最新推荐文章于 2022-10-31 11:22:45 发布

阅读量514

点赞数

分类专栏：后端 php 文章标签： javascript

本文链接：https://blog.csdn.net/qq_32421489/article/details/108336790

版权

php 同时被 3 个专栏收录

106 篇文章 1 订阅

订阅专栏

后端

74 篇文章 0 订阅

订阅专栏

JavaScript

36 篇文章 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;
}

梅坞茶坊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Layui上传多图编辑

@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-con...
复制链接

扫一扫