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

1. 前言

这篇文章将介绍如何使用layui框架进行文件上传、预览及修改操作。layui框架是一个轻量级的模块化前端UI框架，包含了丰富的常用组件，适用于各种Web开发场景。对于不熟悉layui框架的读者，可以先了解一下layui官网的 文档。

2. layui文件上传

2.1 引入上传组件

使用layui进行文件上传时，需要先引入layui的上传组件。在HTML文件中，可以使用如下代码引入上传组件：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.css">

<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script>

2.2 上传文件

在HTML页面中，可以使用lay-upload组件来实现文件上传的功能。下面是一个简单的HTML文件上传代码示例：

<div class="layui-upload">

  <button type="button" class="layui-btn" id="test-upload-normal">选择文件</button>
  <div class="layui-upload-list">
    <table class="layui-table">
      <thead><tr><th>文件名</th><th>大小</th><th>状态</th><th>操作</th></tr></thead>
      <tbody id="demoList"></tbody>
    </table>
  </div>
</div>
<script>
  layui.use('upload', function(){
    var $ = layui.jquery, upload = layui.upload;
    
    //普通文件上传
    var uploadInst = upload.render({
      elem: '#test-upload-normal'
      ,url: '/upload/'
      ,exts: 'jpg|png|gif'
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demoList').append('<tr><td>'+ file.name + '</td><td>' + (file.size/1024).toFixed(1) + 'kb</td><td>等待上传</td><td><button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button></td></tr>')
        });
      }
      ,done: function(res){
        //上传完毕
        console.log(res);
      }
      ,error: function(){
        //请求异常回调
      }
    });
  });
</script>

在上述代码中，通过引入lay-upload组件，实现了一个简单的文件上传功能。利用upload.render方法，我们可以定义一些上传参数，例如选择上传的按钮、上传的地址、上传的文件类型等。在上传文件之前，我们可以通过before方法，对文件进行预览等操作。在完成上传动作后，可以使用done和error方法分别处理成功和失败的回调函数。

3. layui文件预览

3.1 图片预览

在实际应用中，文件上传后需要进行预览操作。在layui框架中，可以使用lay-imge组件实现图片预览功能。下面是一个简单的HTML图片预览代码示例：

<!-- 图片预览模板 -->

<script id="imageTemplate" type="text/html">
  <div class="layui-upload-img">
    <img src="{{ d.src }}">
    <p>{{ d.filename }}</p>
  </div>
</script>
<!-- 图片上传按钮 -->
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test-upload-normal">上传图片</button>
  <div class="layui-upload-list">
    <div id="demoList" class="layui-clear">
    </div>
  </div>
</div>
<script>
  layui.use(['upload', 'layer'], function(){
    var $ = layui.jquery
    ,upload = layui.upload
    ,layer = layui.layer;
    
    //普通图片上传
    var uploadInst = upload.render({
      elem: '#test-upload-normal'
      ,url: '上传接口'
      ,exts: 'jpg|png|gif'
      ,done: function(res){
        console.log(res)
        layer.msg(res.msg);
        //上传成功后，将文件信息添加到列表显示
        $('#demoList').append(laytpl($("#imageTemplate").html()).render({
          "src": res.data.src
          ,"filename": res.data.filename
        }));
      }
      ,error: function(){
        //请求异常回调
      }
    });
    
    //查看图片
    $(document).on('click', '.layui-upload-img', function(){
      var img = new Image();
      img.src = $(this).children('img').attr("src");
      
      layer.open({
        type: 1,
        shade: false,
        offset: '30px',
        area: [img.width+'px', img.height+'px'],
        title: false,
        closeBtn: 1,
      });
    });
  });
</script>

在上述代码中，我们使用laytpl组件定义了一个图片预览模板，然后通过上传成功的回调函数，将每个上传的图片添加到图片列表中，并利用laytpl的render方法，将图片信息填充到前面定义的图片预览模板中展现。点击图片列表中的图片，可以使用layer组件进行大图预览。

3.2 文件预览

除了图片预览外，layui框架还提供了lay-file组件，可以实现除了图片外其他文件类型的预览功能。下面是一个简单的HTML文件预览代码示例：

<!-- 文件预览模板 -->

<script id="fileTemplate" type="text/html">
  <div class="layui-upload-file">
    <a href="{{ d.src }}" target="_blank">
      <i class="layui-icon layui-icon-file"></i>
      <p>{{ d.filename }}<br/>{{ d.filesize }}</p>
    </a>
  </div>
</script>
<!-- 文件上传按钮 -->
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test-upload-normal">上传文件</button>
  <div class="layui-upload-list">
    <div id="demoList" class="layui-clear">
    </div>
  </div>
</div>
<script>
    layui.config({
        base: '../../../layui/lib/' //扩展JS模块的根目录
    });
    layui.use(['jquery', 'upload', 'file'], function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        var file = layui.file;
        //文件上传
        var uploadInst = upload.render({
            elem: '#test-upload-normal'
            , url: '/cgi-bin/upload.cgi'
            ,done: function(res){
              console.log(res)
              layer.msg(res.msg);
              //上传成功后，将文件信息添加到列表显示
              $('#demoList').append(laytpl($("#fileTemplate").html()).render({
                "src": res.data.src
                ,"filename": res.data.filename
                ,"filesize": res.data.filesize
              }));
            }
            ,error: function(){
              //请求异常回调
            }
        });
    });
</script>

在上述代码中，我们使用laytpl组件定义了一个文件预览模板，然后通过上传成功的回调函数，将每个上传的文件添加到文件列表中，并利用laytpl的render方法，将文件信息填充到前面定义的文件预览模板中展现。点击文件列表中的文件，可以直接打开或下载该文件。

4. layui文件修改

对于文件上传后需要进行修改的情况，layui框架提供了lay-edit组件，可以实现在线编辑文件内容的功能。下面是一个简单的HTML文件修改代码示例：

<!-- 文件预览模板 -->

<script id="fileTemplate" type="text/html">
  <div class="layui-upload-file">
    <a href="{{ d.src }}" target="_blank">
      <i class="layui-icon layui-icon-file"></i>
      <p>{{ d.filename }}<br/>{{ d.filesize }}</p>
    </a>
  </div>
</script>
<!-- 文件上传按钮 -->
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test-upload-normal">上传文件</button>
  <div class="layui-upload-list">
    <div id="demoList" class="layui-clear">
    </div>
  </div>
</div>
<!-- 在线编辑器 -->
<div id="editor" style="width:100%;height:700px;"></div>
<script>
    layui.config({
        base: '../../../layui/lib/' //扩展JS模块的根目录
    });
    layui.use(['jquery', 'upload', 'file', 'layedit'], function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        var file = layui.file;
        var layedit = layui.layedit;
        //文件上传
        var uploadInst = upload.render({
            elem: '#test-upload-normal'
            , url: '/cgi-bin/upload.cgi'
            ,done: function(res){
              console.log(res)
              layer.msg(res.msg);
              //上传成功后，将文件信息添加到列表显示
              $('#demoList').append(laytpl($("#fileTemplate").html()).render({
                "src": res.data.src
                ,"filename": res.data.filename
                ,"filesize": res.data.filesize
              }));
              //在线编辑文件信息
              layedit.set({
                uploadImage: {
                  url: '/cgi-bin/upload.cgi'
                }
              });
              var index = layedit.build('editor');
              layedit.setContent(index, '文件内容');
            }
            ,error: function(){
              //请求异常回调
            }
        });
    });
</script>

在上述代码中，我们使用layedit组件构建了一个简单的在线编辑器，然后通过上传成功的回调函数，将上传的文件添加到文件列表中，并构建在线编辑器来实现对该文件在线编辑的功能。

5. 总结

通过上述的介绍，我们学习了如何使用layui框架进行文件上传、预览及修改操作。总的来说，layui框架提供了丰富的组件，可以大大简化Web应用程序开发的流程，而且其文档也非常详细，使得开发者快速上手学习。希望本文内容能够有所帮助，感谢您的阅读！