Bootstrap图片选择器：获取并显示图片完整地址

使用Bootstrap图片选择器获取并显示图片完整地址

本文将介绍如何使用Bootstrap的图片选择器获取用户选择的图片，并将图片的完整地址（Base64编码）显示在网页上。

HTML代码：

<input type='file' class='form-control-file' id='image-selector'>
<img id='selected-image' src='#' alt='Selected Image'>

JavaScript代码：

// 获取图片选择器和图片元素
const imageSelector = document.getElementById('image-selector');
const selectedImage = document.getElementById('selected-image');

// 监听图片选择器的change事件
imageSelector.addEventListener('change', (event) => {
  // 获取选择的图片文件
  const file = event.target.files[0];

  // 创建文件读取器
  const reader = new FileReader();

  // 设置文件读取器的load事件处理函数
  reader.onload = (event) => {
    // 将选择的图片显示在图片元素中
    selectedImage.src = event.target.result;

    // 获取图片的完整地址 (Base64编码)
    const imageUrl = event.target.result;

    // 输出图片的完整地址
    console.log(imageUrl);
  };

  // 读取文件
  reader.readAsDataURL(file);
});

代码说明：

获取元素： 使用document.getElementById()方法获取图片选择器和图片元素。
监听事件： 使用addEventListener()方法监听图片选择器的change事件，即用户选择图片后触发。
获取文件： 从事件对象event.target.files[0]中获取选择的图片文件。
创建文件读取器： 创建一个新的FileReader对象用于读取文件内容。
设置读取器事件： 为文件读取器的load事件设置处理函数，该事件在文件读取完成后触发。
显示图片： 在load事件处理函数中，将读取到的图片数据（Base64编码）赋值给图片元素的src属性，从而在页面上显示选择的图片。
获取完整地址： 读取到的图片数据即为图片的完整地址（Base64编码），可以通过event.target.result获取。
输出地址： 可以将获取到的图片完整地址打印到控制台或进行其他操作。

注意：

图片的完整地址是一个Base64编码的字符串，如果需要上传到服务器，需要将其解码并保存为文件。
以上代码仅供参考，实际应用中可能需要根据具体需求进行调整。