如何请求用户上传图片并获取其src属性进行后续处理

可以通过以下代码实现完整功能，包含图片上传触发、页面展示，以及获取图片的src属性：

HTML 结构 #

<!-- 文件上传控件 -->
<input type="file" id="imageUpload" accept="image/*">
<!-- 图片展示容器 -->
<div id="imagePreview"></div>

JavaScript 逻辑 #

const uploadInput = document.getElementById('imageUpload');
const previewContainer = document.getElementById('imagePreview');

uploadInput.addEventListener('change', function(e) {
  // 获取用户选择的文件
  const file = e.target.files[0];
  if (!file) return;

  // 用FileReader读取文件为DataURL
  const reader = new FileReader();
  reader.onload = function(event) {
    // 创建img元素
    const img = document.createElement('img');
    // 设置图片src为读取到的DataURL
    img.src = event.target.result;
    // 可选：设置图片展示样式
    img.style.maxWidth = '400px';
    img.style.maxHeight = '400px';

    // 将图片添加到预览容器
    previewContainer.innerHTML = '';
    previewContainer.appendChild(img);

    // 这里直接获取图片src，可用于后续程序处理
    console.log('图片src:', img.src);
    // 可将src存入变量供其他逻辑调用
    const imageSrc = img.src;
    // 后续处理代码写在此处...
  };

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

关键说明 #

• accept="image/*"限制文件选择器仅接受图片类型，避免用户误传非图片文件
• FileReader会将本地图片转换为DataURL格式的src，这个值既可以直接用于页面展示，也能被程序后续处理
• 在reader.onload回调中，event.target.result就是图片的DataURL，赋值给img元素后，直接通过img.src即可获取该属性

内容的提问来源于stack exchange，提问作者Inross