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

原创

已于 2022-02-20 10:21:25 修改 · 3.5k 阅读

标签

#js #java #upload #html #layui

于 2021-08-14 10:00:35 首次发布

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

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

1.html代码
2.js代码
3.后台代码
4.实现效果

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"/>

最低0.47元/天解锁文章