使用上载以HTML显示XML数据

Question

我正在做一个小型项目，该项目允许人们将XML数据上传到HTML网站，然后根据滑块的值在HTML页面上显示该数据。 这是我的XML数据的示例：

<?xml version = "1.0" encoding = "UTF-8"?>
<CarList>
    <Car id="1">
        <model>Ferrari</model>
        <image>images/ferrari.jpg</image>
        <colour>red</colour>
    </Car>
    <Car id="2">
        <model>Ford GT</model>
        <image>images/FordGT.jpg</image>
        <colour>blue</colour>
    </Car>
    <Car id="3">
        <model>BMW</model>
        <image>images/bmw.jpg</image>
        <colour>grey</colour>
    </Car>
</CarList>

在我的HTML页面上，我有一个简单的上传按钮。 当用户上载XML文件时，应基于颜色滑块显示一些图像。

<div class="uploadContent">
     Upload Content
     <input type="file" class="upload-content" accept="text/xml" id="upload">
</div>

这是图像和汽车型号一起显示的地方。

<div class = "car">
     <img class = "carImage" id = "carImage" src="images/NoContent.png">
     <p class = "carName" id = "car1Name"> No Content </p>
</div>

滑块将确定显示的是什么汽车。例如，如果用户只想看到红色的汽车，则滑块将向左移动，而上面的图像将仅显示红色的汽车。

<div>
    <!--Red/Blue-->
    <p>Red</p>
        <input type="range", min="1", max="2", step="0.5"/>
    <p>Blue</p>
</div>

我的直觉说我需要为此使用Javascript，但是我不知道从哪里开始。

任何帮助将不胜感激。

Answer 1

如果要从XML文件创建项目列表，则必须

1. 解析XML文件并返回一个数组。 您可以看到XML到数组

2. 解析之后，您可以.map()数组。 参见Array.prototype.map（）

3. 至少，您需要设置图像src属性imageHTML.src = path;