javascript实现上传图片并预览的效果实现代码

实现上传图片并预览的效果，需要以下几个步骤：

1. HTML文件中创建一个包含文件输入字段和图片预览区域的表单。

<form>
  <input type="file" id="fileInput">
  <img id="previewImage">
</form>

在上述HTML代码中，我们创建了一个包含一个文件输入字段和一个空图片的表单。

1. 创建一个JavaScript函数来监听文件输入字段的变化，并显示所选文件的预览图像。

// 获取文件输入字段和图片元素
var fileInput = document.getElementById('fileInput');
var previewImage = document.getElementById('previewImage');

// 监听文件输入字段
fileInput.addEventListener('change', function(event) {
  // 读取所选文件
  var file = event.target.files[0];
  // 创建一个新的 FileReader 对象
  var reader = new FileReader();
  // 设置回调函数，当文件读取完成时运行
  reader.onload = function(event) {
    // 将读取的文件设置为 previewImage 元素的 source
    previewImage.src = event.target.result;
  };
  // 读取文件的二进制数据
  reader.readAsDataURL(file);
});

在上述JavaScript代码中，我们使用了 HTML5 File API 中的 FileReader 对象。 FileReader 通过将文件读取为二进制数据，可以将预览图像设置为读取的数据。

1. 添加CSS样式以使表格正确显示在页面中。

form {
  margin: 20px auto;
  width: 200px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}

在上述CSS代码中，我们设置了整个表单的最大宽度，以及预览图像的最大宽度，使其在各种大小的屏幕上都能正确显示。

这是一个简单的示例，有关更详细的说明，请参见下面的示例代码：

示例1

HTML代码：

<form>
  <input type="file" id="fileInput">
  <img id="previewImage">
</form>

JavaScript代码：

// 获取文件输入字段和图片元素
var fileInput = document.getElementById('fileInput');
var previewImage = document.getElementById('previewImage');

// 监听文件输入字段
fileInput.addEventListener('change', function(event) {
  // 读取所选文件
  var file = event.target.files[0];
  // 创建一个新的 FileReader 对象
  var reader = new FileReader();
  // 设置回调函数，当文件读取完成时运行
  reader.onload = function(event) {
    // 将读取的文件设置为 previewImage 元素的 source
    previewImage.src = event.target.result;
  };
  // 读取文件的二进制数据
  reader.readAsDataURL(file);
});

CSS代码：

form {
  margin: 20px auto;
  width: 200px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}

示例2

HTML代码：

<form>
  <input type="file" id="fileInput">
  <img id="previewImage">
</form>

JavaScript代码：

// 获取文件输入字段和图片元素
var fileInput = document.getElementById('fileInput');
var previewImage = document.getElementById('previewImage');

// 监听文件输入字段
fileInput.addEventListener('change', function(event) {
  // 读取所选文件
  var file = event.target.files[0];
  // 创建一个新的 FileReader 对象
  var reader = new FileReader();
  // 设置回调函数，当文件读取完成时运行
  reader.onload = function(event) {
    // 将读取的文件设置为 previewImage 元素的 source
    previewImage.src = event.target.result;
  };
  // 读取文件的二进制数据
  reader.readAsDataURL(file);
});

CSS代码：

form {
  margin: 20px auto;
  width: 200px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}

以上是两个可以完整执行的代码示例，可以根据实际情况进行修改和优化。