Layui上传图片详解

一、layui上传图片

layui是一款简洁易用的前端UI框架，它提供了多种实用的组件，其中包括上传图片组件。通过layui的上传图片组件，我们可以方便地将图片上传到服务器中，并获取上传后的URL地址。

在使用layui上传图片组件之前，首先需要引入layui框架和上传图片组件的相关文件。具体的使用方法如下：

// 引入layui的JS和CSS文件
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

// 定义一个上传图片的表单

  

  
   

    上传图片
    
    

      <input type="file" name="file" class="layui-upload-file">
    
    
  
   

  

// 使用layui的上传图片组件
<script>
layui.use('upload', function(){
  var upload = layui.upload;
  
  // 执行上传图片操作
  upload.render({
    elem: '.layui-upload-file', // 上传按钮的id
    url: '/upload/', // 上传图片的接口地址
    done: function(res){
      // 上传成功后的回调函数
      console.log(res);
    }
  });
});
</script>

在上述代码中，使用了layui的upload.render()方法来渲染上传图片的一个按钮，当用户点击该按钮后，便会触发上传图片的操作。其中，elem参数表示上传按钮的id，url参数表示上传图片的接口地址，done参数则是上传成功后的回调函数。

二、layui上传图片存到数据库再显示

有时候，我们需要将上传的图片存储到数据库中，然后再通过程序读取图片并在页面上显示出来。实现这样的功能，我们需要进行如下的操作：

1、在数据库中新建一个表，用于存储上传的图片信息。例如：

CREATE TABLE `images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `url` varchar(255) NOT NULL COMMENT '图片URL地址',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='上传的图片表';

2、在上传图片成功后，将图片的URL地址保存到数据库中。具体的实现代码如下：

layui.use('upload', function(){
  var upload = layui.upload;
  
  // 执行上传图片操作
  upload.render({
    elem: '.layui-upload-file', // 上传按钮的id
    url: '/upload/', // 上传图片的接口地址
    done: function(res){
      // 上传成功后的回调函数
      console.log(res);
      
      // 将上传成功的图片URL保存到数据库中
      $.ajax({
        url: '/save/',
        type: 'POST',
        data: {
          'url': res.url
        },
        success: function(data){
          console.log(data.msg);
        }
      });
    }
  });
});

3、从数据库中读取图片并在页面上显示出来。具体的实现代码如下：

// 从数据库中读取图片信息并显示出来
$.ajax({
  url: '/get_images/',
  type: 'GET',
  success: function(data){
    for(var i=0; i


   
在上述代码中，我们首先通过ajax请求获取到数据库中保存的所有图片信息，然后循环遍历每一条数据，取出图片的URL地址，并通过jQuery的append()方法将图片插入到页面中。


   
三、layui上传图片demo

   
以下是一个完整的layui上传图片的demo代码：


   


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


 

    

  
     

    上传图片
    
      

      <input type="file" name="file" class="layui-upload-file">
    
      
  
     

    
 

    

 
<script src="jquery.min.js"></script>
<script src="layui/layui.js"></script>
<script>
// 使用layui的上传图片组件
layui.use('upload', function(){
  var upload = layui.upload;
  
  // 执行上传图片操作
  upload.render({
    elem: '.layui-upload-file', // 上传按钮的id
    url: '/upload/', // 上传图片的接口地址
    done: function(res){
      // 上传成功后的回调函数
      console.log(res);
      
      // 将上传成功的图片URL保存到数据库中
      $.ajax({
        url: '/save/',
        type: 'POST',
        data: {
          'url': res.url
        },
        success: function(data){
          console.log(data.msg);
        }
      });
    }
  });
});

// 从数据库中读取图片信息并显示出来
$.ajax({
  url: '/get_images/',
  type: 'GET',
  success: function(data){
    for(var i=0; i<data.length; i++){
      var url = data[i].url;
      $('#image-container').append('');
    }
  }
});
</script>