HTML文件上传获取图片显示报ERR_UNKNOWN_URL_SCHEME如何解决

问题根因 #

浏览器出于用户隐私安全限制，会隐藏本地文件真实路径，$("#myFile").val()获取到的c:\fakepath\xxx是浏览器伪造的假路径，无法直接作为<img>标签的src属性加载资源，因此会抛出ERR_UNKNOWN_URL_SCHEME错误。另外你当前代码未阻止表单默认提交行为，点击提交按钮会触发页面刷新，也会导致逻辑执行异常。

修复方案 #

通过URL.createObjectURL生成浏览器可识别的临时资源链接加载图片，同时阻止表单默认提交行为，修改后的完整代码如下：

HTML代码（无逻辑改动，仅做保留参考） #

<form>
  <input type="file" id="myFile" name="filename">
  <button id='submit'>Submit</button>
</form>

JS代码 #

// 绑定提交按钮点击事件，阻止表单默认刷新
$('#submit').on('click', function(e) {
  e.preventDefault();
  updateImage();
})

function updateImage() {
  circleArray = [];
  // 获取用户选中的文件对象
  const selectFile = $('#myFile')[0].files[0];
  if (!selectFile) return; // 未选择文件直接终止执行

  // 生成临时可访问的blob资源链接
  const imgSrc = URL.createObjectURL(selectFile);
  const newPic = `id="taco" width="300" height="300" src="${imgSrc}" alt="prime.png"`;
  $("#hide").empty();
  $("#hide").append(`<img ${newPic}>`);
  makeCanvas();

  // 可选优化：图片加载完成后释放临时资源，减少内存占用
  // $('#taco').on('load', () => {
  //   URL.revokeObjectURL(imgSrc);
  // })
}

若需要兼容更早版本浏览器，可替换为FileReader实现：

function updateImage() {
  circleArray = [];
  const selectFile = $('#myFile')[0].files[0];
  if (!selectFile) return;
  const reader = new FileReader();
  reader.onload = function(e) {
    const newPic = `id="taco" width="300" height="300" src="${e.target.result}" alt="prime.png"`;
    $("#hide").empty();
    $("#hide").append(`<img ${newPic}>`);
    makeCanvas();
  }
  reader.readAsDataURL(selectFile);
}

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