Question

我正在尝试用Electron创建一个将html / css / js前端连接到多个python脚本的应用程序。有四个脚本（如下图所示，仅在前端显示了一个脚本），每个脚本都包含两个单独的文件（一个作为输入位置，一个作为保存位置）。每个脚本都包含在其自己的表单中。我是Web开发人员的新手，并希望使文件输入选择看起来比基本输入略高一点。这样做需要一些JS。

JS将检索在搜索文件时选择的输入，并将其添加到span部分，以便用户可以看到他们输入的内容。

我的问题是，我正在使用的代码段仅期望有一个可能的文件输入而不是多个，因此我无法重用相同的类名来调用并在JS脚本中使用。

是否可以通过任何方式修改JS脚本以满足这些要求或任何替代解决方案？任何帮助表示赞赏。

相关的HTML代码：

<!-- This is where the main input sections will go -->
    <div class = "outer-input-container">
        <!-- Form for Camera Calibration python Script -->
            <form class = "mission-select" id = "CameraCalibration">
                <!-- Title Section -->
                <div class = "individual-input-container-1">
                    <h4>Camera Calibration</h4>
                </div>  
                <!-- File Input Section -->
                <div class = "individual-input-container-2">
                    <div class="input-container">
                      <input type="file" id="real-input">
                      <button class="browse-btn">
                        Browse Files
                      </button>
                      <span class="file-info">File</span>
                    </div>
                    <br>
                    <div class="input-container">
                      <input type="file" id="real-input">
                      <button class="browse-btn">
                        Browse Files
                      </button>
                      <span class="file-info">Save Location</span>
                    </div>
                </div>
                <!-- Other Parameter Input and Create section -->
                <div class = "individual-input-container-3">
                    <div class = "tier-heights">
                        <input class = "height-tier-input" type = "text" placeholder = "Height Tier 2">
                        <input class = "height-tier-input" type = "text" placeholder = "Height Tier 3">
                    </div>
                    <div class = "create-container">
                        <input class = "create-bttn" type="submit" value="Create">
                    </div>

                </div>
            </form>
    </div>

JS代码：

<script>
    const uploadButton = document.querySelector('.browse-btn');
    const fileInfo = document.querySelector('.file-info');
    const realInput = document.getElementById('real-input');
    uploadButton.addEventListener('click', () => {
        realInput.click();
        });
    realInput.addEventListener('change', () => {
    const name = realInput.value.split(/\\|\//).pop();
    const truncated = name.length > 50 
    ? name.substr(name.length - 10) 
    : name;

  fileInfo.innerHTML = truncated;
});

</script>

将多个输入文件加载到不同的表单

0 个答案: