layui 上传图片封装使用

最新推荐文章于 2022-04-12 21:52:03 发布

onlylele

最新推荐文章于 2022-04-12 21:52:03 发布

阅读量778

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/onlylele/article/details/103013435

版权

本文详细介绍了如何使用 layui 框架进行图片上传的封装，包括单张和多张图片上传的实现方法。

摘要由CSDN通过智能技术生成

一张图片上传时：

html:
 <div class="form-group row text">
     <label class="col-sm-3 col-form-label text-right">分类图片</label>
     <div class="layui-form-item col-sm-9">
        <p class="up-p">
         <span  style="color: #17a2b8!important; font-size: 15px; padding-left: 18px;">分类图片大小推荐 200px*200px</span>
         </p>
         <div class="z_photo upimg-div clear oneimg" style="border: none; padding: 18px 0 0 18px;">
              <section class="up-section fl">
                   <span class="up-span"></span>
                   <div  class="close-upimg-img" >
                     <img src="/layui/upimg/del.png" style="width: 33px; height: 33px; ">
                   </div>
                    <img src="img/buyerCenter/3c.png" class="type-upimg" alt="添加标签">
                    <img src="/layui/upimg/a11.png" class="up-img-img">
                    <p class="img-namep"></p>
                    <input type="file" name="file" id="topimg" class="file1"  accept="image/jpg,image/jpeg,image/png,image/bmp" multiple>
                        <input type="hidden"  id="cover" >
               </section>
         </div>
      </div>
  </div>

<script type="text/javascript" src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'element', 'jquery','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            upload = layui.upload,
            element = layui.element;
     
        var defaults = {
            fileType         : ["jpg","png","bmp","jpeg"],   // 上传文件的类型
            fileSize         : 1024 * 1024 * 1