使用layui的上传图片功能

最新推荐文章于 2024-07-30 17:27:12 发布

cyndi_超努力

最新推荐文章于 2024-07-30 17:27:12 发布

阅读量1.2k

点赞数

分类专栏：工作积累文章标签： layui javascript css

本文链接：https://blog.csdn.net/m0_66722601/article/details/127611974

版权

工作积累专栏收录该内容

39 篇文章 1 订阅

订阅专栏

1.首先页面上要引入layui.css和layui.js

<link rel="stylesheet" href="../layui-v2.7.6//layui/css/layui.css">

<script src="../layui-v2.7.6/layui/layui.js"></script>

2.在html中引入上传图片的组件

 <div class="layui-upload">
       <blockquote class="layui-elem-quote layui-quote-nm" style="width:231px;height: 252px;background-color: red;padding: 0px;border: none;margin:0px;display: flex;align-items: center;">
             <div class="layui-upload-list" id="tx1" >
                     <div class="list">
                           <img src="../IMAGES/wei-zhaopian.png" alt="" class="layui-upload-img">
                      </div>
                  </div>
          </blockquote>
           <button type="button" class="layui-btn" id="touxiang" style="background-color:#2A82E4;">点击上传头像</button> 
    </div>

3.在js中写入

layui.use(["upload", "element",'jquery'],function(){
     var $ = layui.jquery,
     upload = layui.upload,
     element = layui.element,
   //   头像上传
      upload.render({
        elem: '#touxiang'//页面中的点击上传头的按钮的id
        ,url: 'https://httpbin.org/post' //此处配置你自己的上传接口即可
        ,multiple: true
        ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#tx1').html(`<div class="list">
            <img src="${result}" alt="${file.name}" class="layui-upload-img">
        </div>`)
          });
        }
        ,done: function(res){
          //上传完毕
        }
      });

}}

4.实现效果