layui实现多图片上传以及视频上传,包括预览和删除功能

本文详细介绍了如何使用layui库在前端实现多图片和视频的上传功能,包括预览和删除操作,同时展示了HTML、JS和后端Java代码示例。

layui实现多图片上传以及视频上传,包括预览和删除功能

1.html代码

 <!--多图上传-->
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
       <legend>上传图片</legend>
 </fieldset>
 <div class="layui-upload">
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
      <button type="button" class="layui-btn" id="upload_2"><i class="layui-icon">&#xe64a;</i>图片上传</button>
    </blockquote>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图:
      <div class="layui-upload-list" id="upload_list"></div>
          <input type="hidden" name="images_str" id="picText_2" class="upload_image_url" value="">
      </blockquote>
</div>
 <!--视频上传-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
     <legend>上传视频</legend>
</fieldset>

<div class="layui-form-item">
     <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
         <button type="button" class="layui-btn cover" id="control_video_button"><i class="layui-icon">&#xe6ed;</i>视频上传</button>
         <button type="button" class="layui-btn layui-btn-danger cover" id="control_video_del" style="display: inline"><i class="layui-icon">&#xe640;</i>删除视频</button>
         <input type="hidden" id="control_video" value="{$detail.control_video}" name="control_video"/>
         
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值