Question

  <!DOCTYPE html>
<html>
<head>
   <title>My webpage!</title>
    <meta charset=utf-8 />                      
    <link rel="stylesheet" href="styles/testcss.css" />
    <script src="jquery-3.3.1.js"></script>
    <script src="./javascript/moment.js"></script>
    <script src="./javascript/testjs.js" ></script>
</head>
<body>
<script>
function getURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#img_output').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#img_input").change(function() {
  getURL(this);
});
</script>

<input type='file' id="img_input" />
<img id="img_output" src="#" alt="Image" />
</body>
</html>

已编辑以添加代码。我只做了一个文档来单独测试这个功能。我已经尝试了类似的其他代码示例，但一切都给了我相同的结果。

我正在尝试使用js/jquery和HTML从我的电脑上传图像并将其显示在页面上。由于某些原因，我的代码不起作用，但是当我在线搜索示例并且字面上复制和粘贴它仍然无效。

此时，我不知道在哪里可以找到问题所在。当我运行任何下载的代码示例或我编写的代码时，没有出现错误。

我意识到这不是最大的问题。我整天都在尝试覆盖和覆盖看起来应该花了我10分钟的时间。我阅读过文档，查看示例，复制和粘贴示例，没有任何作用。我点击浏览按钮，它打开图像，我选择图像，没有任何反应。

非常感谢任何建议。

Answer 1

代码在哪里？

无论如何，您使用的是J-query本地文件？ CDN？

如果添加任何其他JS库，它可能会发生冲突。

Answer 2

如果没有任何代码段，我们无法帮助你们。尝试＆amp;了解以下片段。

function getURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#img_output').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#img_input").change(function() {
  getURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' id="img_input" />
<img id="img_output" src="#" alt="Image" />

使用Javascript上传图像并显示

2 个答案: