layui上传图片并预览

### 实现Layui框架中的图片上传与即时预览

在Web开发中，实现图片上传并即时显示预览是一项常见需求。通过使用Layui这一流行的前端UI库可以简化此过程。下面介绍一种方法来达成这个目标。

#### 准备工作
确保已引入必要的资源文件，包括`layui.css`和`layui.js`。可以通过CDN链接快速集成这些依赖项到HTML页面内[^1]。

#### HTML结构定义
创建用于触发文件选择对话框以及展示图片预览区域的基础DOM元素：

<div class="layui-upload">
  <button type="button" class="layui-btn">上传图片</button>
  <div class="layui-upload-list">
    <img id="previewImg" src="" alt="预览图" style="max-width: 100%; display:none;">
  </div>
</div>

#### JavaScript逻辑编写
利用Layui提供的API完成核心业务处理——监听文件变化事件，在获取新图像数据之后更新界面上相应位置的内容；同时设置最大允许上传数目等约束条件以增强用户体验。

layui.use('upload', function(){
  var upload = layui.upload;

  // 执行实例
  var uploadInst = upload.render({
    elem: '#test' // 绑定元素
    ,url: '/upload/' // 上传接口
    ,before: function(obj){
      // 预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#previewImg').attr('src', result); // 图片链接（base64）
        $('#previewImg').show();
      });
    }
    ,done: function(res){
      // 如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      // 上传成功后的操作...
    }
    ,error: function(){
      // 请求异常回调
    }
  });
});

上述代码片段展示了如何配置一个简单的图片上传组件，并实现了当用户选取新的图片时立即显示出其缩略图的效果。需要注意的是实际应用环境中应当替换掉示例URL路径`/upload/`为真实的服务器端接收地址。