layui上传多图添加

最新推荐文章于 2024-06-06 10:27:00 发布

梅坞茶坊

最新推荐文章于 2024-06-06 10:27:00 发布

阅读量292

点赞数

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

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

版权

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="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;
}