带有 JavaScript 的布尔玛文件

Bulma是一个免费的开源 CSS 框架，可以用作 Bootstrap 的替代品。它带有预构建的组件，例如按钮和图标。在本文中，我们将了解如何使用 JavaScript 使用文件上传输入检索所选文件的名称。

为了检索所选文件的文件名，我们将在文件上传输入中附加一个onChange侦听器，每当 onChange 事件触发时，我们检查是否选择了任何文件，如果选择了文件，我们将检索其名称并更改文本名称容器到文件的名称。

示例：下面的示例显示了如何使用 JavaScript 获取所选文件的名称。

HTML

 

    
    
    
        h1,
        p {
            text-align: center;
        }
 
        .container>div{
            margin-top: 25px;
        }
    

 

    
        
          GeeksforGeeks
        
         
 
Bulma File with JavaScript
 
 
        
        
            
                
                
                    
                        
                    
                    
                        Select an Image..
                    
                
                
                    No Image Selected
                
            
        
    
 
    
    
        // Select the input element using
        // document.querySelector
        var input = document.querySelector(
          "#file-with-js>.file-label>.file-input"
        );
 
        // Bind an listener to onChange event of the input
        input.onchange = function () {
            if(input.files.length > 0){
                var fileNameContainer =
                    document.querySelector(
                      "#file-with-js>.file-label>.file-name"
                    );
                // set the inner text of fileNameContainer
                // to the name of the file
                fileNameContainer.textContent =
                  input.files[0].name;
            }
        }
    

 

输出：

带有 JavaScript 的布尔玛文件

参考： https://bulma.io/documentation/form/file/#javascript