JavaScript 显示图片而不上传

在网页开发中，经常会遇到需要显示图片的场景。通常情况下，我们可以通过上传图片到服务器，然后从服务器获取图片的 URL 地址来显示图片。然而，有时候我们想要在客户端直接显示图片，而不上传到服务器。本篇将介绍如何使用 JavaScript 在客户端显示图片而不上传。

以下是一种常见的方法，使用 JavaScript 的 FileReader 对象来读取本地文件，并通过创建一个新的 Image 对象来显示图片。

<input type="file" id="imageInput" accept="image/*">
<div id="imageContainer"></div>

<script>
document.getElementById('imageInput').addEventListener('change', function(event) {
  var file = event.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
    var imageURL = e.target.result;
    var image = new Image();
    image.src = imageURL;

    var imageContainer = document.getElementById('imageContainer');
    imageContainer.innerHTML = '';
    imageContainer.appendChild(image);
  };

  reader.readAsDataURL(file);
});
</script>

上述代码片段涵盖了以下关键步骤：

1. 为 <input type="file"> 元素添加一个事件监听器，当用户选择文件时触发。
2. 获取文件对象并创建一个 FileReader 对象。
3. 将 FileReader 的 onload 事件处理函数设置为一个回调函数，该函数将在文件读取完成后触发。
4. 在回调函数中，通过 e.target.result 获取文件数据的 URL。
5. 创建一个新的 Image 对象，并将文件数据的 URL 赋值给 src 属性。
6. 使用 DOM 操作将图片元素插入到页面中。

这样，当用户选择一个图片文件后，该图片就会在页面上显示出来。

请注意，由于涉及到读取本地文件，上述代码只能在客户端执行，并且受到浏览器的安全限制。因此，只有在用户主动选择文件后，才能获取到文件数据并将其显示。