使用上載以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;