可以看到这里提供了一个上传图片的功能，同时显示图片的大小和宽高，但是这里的宽高还是历史图片的，如何上传完图片就显示其宽高呢-Go服务器开发

要实现上传完图片后即时显示其宽高，你可以使用前端的JavaScript和HTML来完成。

首先，在HTML中创建一个用于上传图片的input元素，并指定id和监听change事件的函数：

<input type="file" id="upload_file" onchange="handleImageUpload()">

接下来，编写JavaScript函数handleImageUpload()来处理上传图片的逻辑。该函数会在用户选择了图片文件后被调用。

function handleImageUpload() {
  const fileInput = document.getElementById('upload_file');
  const imgPreview = document.getElementById('img-preview');
  const widthHeightInfo = document.getElementById('width-height-info');

  // 获取选中的图片文件
  const file = fileInput.files[0];

  // 使用FileReader对象读取文件并获取DataURL
  const reader = new FileReader();
  
  reader.onload = function(event) {
    // 创建新的image元素并设置src为DataURL
    const imgElement = document.createElement('img');
    imgElement.src = event.target.result;

    // 加载图像后获取宽度和高度信息
    imgElement.onload = function() {
      const width = this.width;
      const height = this.height;

      // 在预览图像上显示图片
      imgPreview.src = event.target.result;
      
      // 更新宽高信息显示
      widthHeightInfo.textContent = `宽度: ${width}px, 高度: ${height}px`;
    };
  };

  reader.readAsDataURL(file);
}

以上代码通过创建一个FileReader对象来读取所选图片文件，并使用URL.createObjectURL方法将其转换为可展示的DataURL。然后，创建一个新的img元素，并将DataURL赋值给它的src属性。当图像加载完成后，可以获取其宽度和高度信息，并将它们更新到预览图像下方的宽高信息显示区域。

这样，当用户选择完图片文件并上传后，页面上会即时显示出该图片的大小、宽度和高度信息。

内容由零声教学AI助手提供，问题来源于学员提问