c语言编程笔录

首页 >   > 笔记大全

笔记大全

layui文件上传 预览及修改方法

更新时间：2023-12-02

前言：

layui是一种基于jQuery的前端UI组件库，其提供了便捷的上传文件功能，此处的文件指图片、视频、音频等资源，通过layui框架可以对文件上传、文件预览及文件修改等功能进行定制，从而满足不同场景下的需求。本文将详细介绍在layui框架下实现文件上传、预览及修改的方法，希望能够帮助到有需要的读者。

文件上传：

layui在上传文件方面提供了丰富的API供开发者使用，其中最为常用的是upload.render()方法。这个方法可以将文件上传控件渲染到页面上，用户通过点击上传按钮即可完成文件上传操作。下面是相应的代码示例： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <link rel="stylesheet" href="http://cdn.layui.com/layui-v2.5.5/css/layui.css">
    <script src="http://cdn.layui.com/layui-v2.5.5/layui.js">
  </head>
  <body>
    <div class="layui-upload">
      <button type="button" class="layui-btn" id="uploadBtn">上传文件</button>
      <input type="hidden" name="filePath" id="filePath">
    </div>
    <script>
      //渲染上传控件
      layui.use('upload', function () {
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
          elem: '#uploadBtn', 
          url: '/upload/', 
          done: function (res) {
            //上传完毕回调
            console.log(res);
            //将文件路径保存到隐藏域中，方便后端获取
            $('#filePath').val(res.filepath);
          },
          error: function () {
            //请求异常回调
            console.log('上传失败');
          }
        });
      });
    </script>
  </body>
</html>

文件预览：

layui提供了多种方式来预览文件，其中最常用的是图片预览和在线文件预览。用户上传的不同类型的文件将被显示在不同的元素中，比如图片文件将被显示在元素中，而PDF文件将被显示在