HTML Input FileUpload files用法及代碼示例

HTML DOM中的Input FileUpload files屬性用於返回FileList對象，該對象表示使用文件上載按鈕選擇的一個或多個文件，這是一個隻讀屬性。通過FileList對象，您可以獲得有關文件的信息。

用法:

fileuploadObject.files

例子：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      Input FileUpload files Property 
  </title> 
</head> 
  
<body onload="myFunction()"> 
    <center> 
        <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
        <p> 
            <b> 
            DOM Input FileUpload files Property 
          </b> 
        </p> 
        <input type="file" 
               id="myFile"
               multiple size="50"
               onchange="myFunction()"> 
  
        <p id="demo"></p> 
  
        <script> 
            function myFunction() { 
                var GFG = 
                    document.getElementById("myFile"); 
                var msg = ""; 
                if ('files' in GFG) { 
                    if (GFG.files.length == 0) { 
                        msg = 
                            "Select multiple files using" + 
                            " 'Shift'."; 
                    } else { 
                        for (var i = 0; i < GFG.files.length; i++) { 
  
                            msg += "<br><strong>" + (i + 1) + 
                                ". file</strong><br>"; 
  
                            var file = GFG.files[i]; 
                            if ('name' in file) { 
                                msg += "name:" + file.name + "<br>"; 
                            } 
                            if ('size' in file) { 
                                msg += "size:" + file.size + 
                                    " bytes <br>"; 
  
                            } 
                        } 
                    } 
                } else { 
                    if (GFG.value == "") { 
                        msg += "Select multiple" +  
                          " files using 'Shift'."; 
                        
                    } else { 
                        msg += "This file property" +  
                          " is not supported!!"; 
                        
                        /* If the browser does not 
                        support the files property, 
                        it will return the path of 
                        the selected file instead. */ 
                        msg += "<br>The path of the " +  
                          "selected file:" + GFG.value; 
                    } 
                } 
                document.getElementById("demo").innerHTML = msg; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：
之前：

後：

支持的瀏覽器：

穀歌瀏覽器
Edge
火狐瀏覽器
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自Vijay Sirra大神的英文原創作品 HTML | DOM Input FileUpload files Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。