图片展示|前端开发：js ajax实现图片回显与通过ajax获取图片在页面显示

📸 前端开发实战：用JS Ajax玩转图片回显与动态展示

2025年8月最新动态：随着WebAssembly的普及，现代浏览器处理图片性能提升300%！🎉 但传统Ajax图片处理仍是必备技能，今天我们就手把手教你用纯JS实现「选择图片即时预览」和「动态加载服务器图片」两大高频需求~

先看效果 🌟

1. 本地图片回显：用户选择文件后，无需刷新直接显示缩略图
2. 远程图片加载：点击按钮从服务器获取图片并渲染到页面

<!-- 基础HTML结构 -->
<div class="container">
  <h2>1. 图片回显演示</h2>
  <input type="file" id="uploader" accept="image/*">
  <div id="preview"></div>
  <h2>2. 动态加载图片</h2>
  <button id="loadBtn">获取服务器图片</button>
  <div id="imageContainer"></div>
</div>

本地图片回显（FileReader大法） 📁→🖼️

document.getElementById('uploader').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(event) {
    const img = document.createElement('img');
    img.src = event.target.result;
    img.style.maxWidth = '300px';
    document.getElementById('preview').appendChild(img);
  };
  reader.readAsDataURL(file); // 关键步骤！
});

技术要点：
✅ FileReader对象读取本地文件
✅ readAsDataURL转Base64格式
✅ 通过onload事件异步获取结果

Ajax获取远程图片（XMLHttpRequest版） ☁️→🖥️

document.getElementById('loadBtn').addEventListener('click', function() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/get-image', true);
  xhr.responseType = 'blob'; // 重要！指定响应类型
  xhr.onload = function() {
    if (this.status === 200) {
      const blob = this.response;
      const img = document.createElement('img');
      const objectURL = URL.createObjectURL(blob);
      img.src = objectURL;
      document.getElementById('imageContainer').innerHTML = '';
      document.getElementById('imageContainer').appendChild(img);
      // 记得释放内存哦
      img.onload = function() {
        URL.revokeObjectURL(objectURL);
      };
    }
  };
  xhr.send();
});

常见坑点🚨：

1. 忘记设置responseType='blob'会导致乱码
2. 使用完URL.createObjectURL()要手动释放内存
3. 服务端需设置Content-Type: image/jpeg等正确MIME类型

升级方案（Fetch API版） ⚡

更现代的写法可以这样：

// 获取远程图片简化版
async function loadImage() {
  const response = await fetch('/api/get-image');
  const blob = await response.blob();
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.getElementById('imageContainer').appendChild(img);
}

完整CSS美化方案 🎨

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', sans-serif;
}
#preview, #imageContainer {
  margin-top: 15px;
  min-height: 200px;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
button, input[type="file"] {
  padding: 8px 15px;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

服务端配合要点 🔧

以Node.js为例：

// Express路由示例
app.get('/api/get-image', (req, res) => {
  const imagePath = path.join(__dirname, 'assets/sample.jpg');
  res.sendFile(imagePath); // 自动设置正确的Content-Type
});

2025年专家建议📢：

1. 大图片建议先压缩再传输
2. 考虑使用<picture>标签适配不同分辨率
3. 重要图片添加alt属性提升无障碍访问

现在就去试试吧！遇到问题欢迎在评论区交流~ 💬