正文

学会layui上传文件，轻松实现图片和文档上传渲染技巧

/0 浏览量
0622

在当今的互联网时代，文件上传功能已经成为网站和应用程序的标配。而Layui作为一款流行的前端UI框架，提供了丰富且易于使用的组件。本文将详细讲解如何使用Layui实现图片和文档的上传与渲染，让你轻松掌握这一实用技能。

一、Layui文件上传组件简介

Layui的文件上传组件支持多种文件类型，包括图片、文档、视频等。它提供了简单的API和丰富的配置项，使得开发者可以轻松实现文件的上传、预览和下载等功能。

二、准备工作

在开始使用Layui文件上传组件之前，请确保已经按照以下步骤进行了准备工作：

  1. 引入Layui的CSS和JavaScript文件。
  2. 引入Layui的文件上传模块。
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">

<!-- 引入Layui JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>

<!-- 引入Layui文件上传模块 -->
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui/layui.all.js"></script>

三、图片上传与渲染

1. HTML结构

首先，我们需要创建一个用于上传图片的表单。

<div class="layui-upload">
  <button type="button" class="layui-btn" id="uploadImage">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1">
    <p id="demoText"></p>
  </div>
</div>

2. JavaScript代码

接下来，我们需要编写JavaScript代码来处理图片上传。

layui.use('upload', function(){
  var upload = layui.upload;
  
  // 执行实例
  var uploadInst = upload.render({
    elem: '#uploadImage', // 绑定元素
    url: '/upload', // 上传接口
    before: function(obj){
      // 预读本地文件域的文件
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); // 图片链接（base64）
      });
    },
    done: function(res){
      // 上传完毕回调
      console.log(res);
    },
    error: function(){
      // 请求异常回调
      console.log('上传失败');
    }
  });
});

3. 效果展示

上传图片后，图片将显示在页面中。

图片上传与渲染效果

四、文档上传与渲染

1. HTML结构

与图片上传类似，我们需要创建一个用于上传文档的表单。

<div class="layui-upload">
  <button type="button" class="layui-btn" id="uploadDocument">上传文档</button>
  <div class="layui-upload-list">
    <table class="layui-table">
      <colgroup>
        <col width="200">
        <col>
      </colgroup>
      <thead>
        <tr>
          <th>文档名</th>
          <th>大小</th>
        </tr>
      </thead>
      <tbody id="documentList"></tbody>
    </table>
  </div>
</div>

2. JavaScript代码

然后，我们需要编写JavaScript代码来处理文档上传。

layui.use('upload', function(){
  var upload = layui.upload;
  
  // 执行实例
  var uploadInst = upload.render({
    elem: '#uploadDocument', // 绑定元素
    url: '/upload', // 上传接口
    accept: 'file', // 允许上传的文件类型
    done: function(res){
      // 上传完毕回调
      var tr = '<tr><td>' + res.name + '</td><td>' + (res.size / 1024).toFixed(2) + ' KB</td></tr>';
      $('#documentList').append(tr);
    },
    error: function(){
      // 请求异常回调
      console.log('上传失败');
    }
  });
});

3. 效果展示

上传文档后，文档信息将显示在表格中。

文档上传与渲染效果

五、总结

通过本文的讲解，相信你已经掌握了使用Layui实现图片和文档上传与渲染的技巧。在实际开发中，你可以根据需求调整上传接口、文件类型和渲染效果。希望本文对你有所帮助！

-- 展开阅读全文 --