layui显示上传图片进度

可以使用 layui 的 upload 组件，通过监听 uploadProgress 事件来显示上传图片的进度。

示例代码如下：

HTML 代码：

<div class="layui-upload">
  <button type="button" class="layui-btn" id="test-upload-normal">选择图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="test-upload-img">
    <p id="test-upload-text"></p>
  </div>
</div>

JavaScript 代码：

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

  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test-upload-normal'
    ,url: '/upload/'
    ,progress: function(n, elem){
      var percent = n + '%'; //获取上传进度百分比
      elem.siblings('.layui-progress').find('.layui-progress-bar').css('width', percent); //设置进度条宽度
      elem.siblings('.layui-progress').find('.layui-progress-text').text(percent); //设置进度条文字
    }
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});

在上面的代码中，通过监听 progress 事件来获取上传进度百分比，并通过设置进度条的宽度和文字来显示进度。

另外，要注意在 HTML 代码中添加进度条的 DOM 结构：

<div class="layui-progress layui-progress-big" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
  <div class="layui-progress-text">0%</div>
</div>

这样就可以显示上传图片的进度了。