如何在JS Fiddle的div中上传图片？本地文件引用失败求助

数据老陈

2026-8-4

在JS Fiddle的指定div中显示上传图片的方法

直接引用本地文件路径在JS Fiddle里行不通，因为浏览器的同源策略会拦截跨源的本地文件请求，导致代码无法识别本地文件路径。你可以用FileReader API来读取本地图片并显示，具体实现步骤如下：

实现步骤

1. 添加HTML结构

在JS Fiddle的HTML面板中插入上传控件和目标显示div：

<input type="file" id="imageUpload" accept="image/*">
<div id="targetDiv" style="width: 300px; height: 300px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;"></div>

accept="image/*"用来限制只能选择图片类型的文件
targetDiv就是你要显示图片的指定容器，这里加了基础样式方便查看

2. 编写JavaScript逻辑

在JS Fiddle的JavaScript面板中添加文件读取和显示的代码：

const uploadInput = document.getElementById('imageUpload');
const targetDiv = document.getElementById('targetDiv');

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

  // 创建FileReader实例读取文件
  const reader = new FileReader();
  reader.onload = function(event) {
    // 创建img元素设置图片源
    const img = document.createElement('img');
    img.src = event.target.result;
    img.style.maxWidth = '100%';
    img.style.maxHeight = '100%';
    
    // 清空div并插入图片
    targetDiv.innerHTML = '';
    targetDiv.appendChild(img);
  };
  // 将文件转为DataURL格式
  reader.readAsDataURL(selectedFile);
});

这段代码会监听文件选择事件，把选中的本地图片转成浏览器能识别的DataURL，然后创建图片元素插入到指定div中。