JavaScript实现图片本地预览功能【不用上传至服务器】

JavaScript实现图片本地预览功能，不用上传至服务器，可以通过以下几个步骤实现：

1. HTML代码： 在HTML代码中添加<input>标签，用于选择图片文件，并监听其中的change事件，代码如下：

<!-- 选择图片文件 -->
<input type="file" onchange="handleFiles(this.files)" multiple />

1. JavaScript代码：通过JavaScript监听change事件后，当图片文件选择完成，可以获得FileList类型的对象。可以调用window.URL.createObjectURL()函数来创建一个本地地址，从而在网页中预览图片。代码如下：

function handleFiles(files) {
  const preview = document.querySelector(".preview");
  preview.innerHTML="";
  for (let file of files) {
    const image = new Image();
    image.src = window.URL.createObjectURL(file);
    preview.appendChild(image);
  }
}

上述代码将选择的所有文件转换为<img>元素，并将它们插入到HTML中的class为preview的元素中，即为预览区域。

1. 样式代码：通过CSS设置预览区域的样式。例如设置预览区域为块级容器，并将图片居中显示。示例如下：

.preview {
  display: block;
  text-align: center;
}

.preview img {
  margin: 10px;
  max-width: 200px;
  max-height: 200px;
}

这样，在选择本地图片后，预览区域就会显示所选图片的缩略图，且不需要上传至服务器即可实现本地预览功能。

以下是两个完整示例：
- 示例1：

HTML代码：

<!-- 选择图片文件 -->
<input type="file" onchange="handleFiles(this.files)" multiple />

<!-- 预览区域 -->
<div class="preview"></div>

JavaScript代码：

function handleFiles(files) {
  const preview = document.querySelector(".preview");
  preview.innerHTML="";
  for (let file of files) {
    const image = new Image();
    image.src = window.URL.createObjectURL(file);
    preview.appendChild(image);
  }
}

CSS代码：

.preview {
  display: block;
  text-align: center;
}

.preview img {
  margin: 10px;
  max-width: 200px;
  max-height: 200px;
}

• 示例2：

HTML代码：

<!-- 选择图片文件 -->
<input type="file" onchange="handleFiles(this.files)" multiple />

<!-- 预览区域 -->
<ul class="preview"></ul>

JavaScript代码：

function handleFiles(files) {
  const preview = document.querySelector(".preview");
  preview.innerHTML="";
  for (let file of files) {
    const item = document.createElement("li");
    const image = new Image();
    image.src = window.URL.createObjectURL(file);
    item.appendChild(image);
    preview.appendChild(item);
  }
}

CSS代码：

.preview {
  list-style: none;
  padding: 0;
  margin: 0;
}

.preview li {
  display: inline-block;
  margin: 10px;
}

.preview img {
  max-width: 200px;
  max-height: 200px;
}

以上是JavaScript实现图片本地预览功能的完整攻略。