HTML/Javascript-从联机文件获取图像源_Javascript_Html

HTML/Javascript-从联机文件获取图像源

javascript html

HTML/Javascript-从联机文件获取图像源,javascript,html,Javascript,Html,我希望在网页中有一个图像，可以根据在线文件中存储的文件路径进行更改（不管是什么类型的文本文件，xml、.txt，只要效果最好）。因此，我基本上希望页面从该文件中检索文本，然后将该文本用作该页面中图像的源。我假设这是一个Javascript的东西，但这对我来说并不重要，只要它能工作。有什么想法吗？谢谢 **编辑：忘了提及：我在谷歌Chrome扩展中使用代码，不确定这是否重要，因为它使用常规HTML/Javascript，但它存储在用户计算机上，我希望图像存储在我的服务器上 **编辑2：刚

我希望在网页中有一个图像，可以根据在线文件中存储的文件路径进行更改（不管是什么类型的文本文件，xml、.txt，只要效果最好）。因此，我基本上希望页面从该文件中检索文本，然后将该文本用作该页面中图像的源。我假设这是一个Javascript的东西，但这对我来说并不重要，只要它能工作。有什么想法吗？谢谢

**编辑：忘了提及：我在谷歌Chrome扩展中使用代码，不确定这是否重要，因为它使用常规HTML/Javascript，但它存储在用户计算机上，我希望图像存储在我的服务器上

**编辑2：

刚刚得到了一些似乎工作得很好的东西，我只需要在代码的主体部分使用：

      <script type="text/javascript" >
      var i=0;
      for (i=0;i<=FilePath.length - 1;i++)
      {
      document.write('<img src="' + FilePath[i] + '"/>');
      }
      </script>


var i=0；
对于（i=0；i它的简单方法是将文件路径存储在Javascript文件中，在JS文件中创建一个数组，并在数组中包含所有文件路径，然后将文件存储在Web服务器上
然后，您可以使用
<script src="JS_File_path_on_web_server" type="text/javascript" ></script>

创建一个这样的文件，并在数组中存储任意数量的路径
<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
  </script>

  <script src="JS_File_path_on_web_server" type="text/javascript" ></script>

  <script type="text/javascript" >
   $(document).ready(function()
   {
      $('#DisplayImage').attr('src',FilePath[0]);
   });
  </script>
  </head>
  <body>
        <img src="" id="DisplayImage" />
  </body>
</html>


$（文档）.ready（函数（）
{
$（'#DisplayImage'）.attr（'src'，FilePath[0]）；
});

这是一个简单的例子，您可以尝试学习javascript和Jquery来进一步调整它。
由于我基于php的答案不适用，我们现在可以忽略它。：）为什么只在服务器端动态地包含它？这通常是一种更好的处理方式。可能更有意义，我只是不知道如何做你的建议…你能提供更多的信息/细节吗？谢谢我想他指的是我下面的答案。啊哈，就像我在下面提到的，我不认为这对我有用，因为我认为我不能使用PHP…谢谢你提供的信息！不过，我不太懂Javascript或jQuery——你能帮我完成剩下的代码吗？还有一个问题：是否可以根据数组中包含的路径数显示不同数量的图像？我认为这是可能的，只要对数组中的所有路径运行for循环，然后就可以使用document.write()动态创建图像。刚才在上面添加了我在Google Chrome扩展中使用的代码，我不认为我可以使用PHP函数…@IsaacL，对。在这种情况下，Guatham的建议是一个很好的建议。jQuery对此非常简单。如果他不告诉你怎么做，我可以。无论如何，谢谢你的帮助！仍然在寻找o这是其中的一部分，但我希望代码应该有帮助…@IsaacL，您的javascript for循环看起来很好；-）一旦您学习了javascript基础知识，jQuery就非常值得学习。它确实简化了事情，并补偿了浏览器之间的差异。如果你没有firefox的firebug扩展，那就去买吧。jslint是调试的最后手段。完成所有这些，你很快就会成为javascript高手。非常感谢！！听起来是个好主意，不过我仍然需要弄清楚javascript和jQuery之间的区别；）
<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
  </script>

  <script src="JS_File_path_on_web_server" type="text/javascript" ></script>

  <script type="text/javascript" >
   $(document).ready(function()
   {
      $('#DisplayImage').attr('src',FilePath[0]);
   });
  </script>
  </head>
  <body>
        <img src="" id="DisplayImage" />
  </body>
</html>