HTML DOM Input FileUpload用法及代碼示例

DOM Input FileUpload對象代表HTML表單的輸入類型，即“file”。這用於啟用將文件上傳到網站的用戶端函數。

用法:

document.getElementById("ID")

“ ID”將分配給輸入元素。

屬性值：

accept:此屬性用於設置或返回文件上傳按鈕的accept屬性的值
autofocus:此屬性用於設置或返回文件上載按鈕是否應在頁麵加載時自動獲得焦點
defaultValue:此屬性用於設置或返回文件上傳按鈕的默認值
disabled:此屬性用於設置或返回是否禁用文件上傳按鈕
files:此屬性用於返回一個FileList對象，該對象表示使用文件上載按鈕選擇的一個或多個文件
form:此屬性用於返回對包含文件上載按鈕的表單的引用
multiple:此屬性用於設置或返回是否允許用戶在文件上傳字段中選擇多個文件
name:此屬性用於設置或返回文件上傳按鈕的name屬性的值
required:此屬性用於設置或返回在提交表單之前是否必須選擇文件上載字段中的文件
type:此屬性用於返回文件上傳按鈕是哪種類型的表單元素
value:此屬性用於返回所選文件的路徑或名稱

以下示例顯示了FileUpload的工作方式。
示例1：通過FileUpload對象上傳文件

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      DOM Input FileUpload Object 
  </title> 
    <style> 
        h1 { 
            color:green; 
        } 
          
        h3 { 
            font-family:Impact; 
        } 
          
        body { 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> 
      GeeksforGeeks 
  </h1> 
    <h3> 
      DOM Input FileUpload Object 
  </h3> 
  
    <input type="file"
           id="myFile"> 
    <p id="submit_text"> 
  </p> 
  
    <p> 
      Click the "Upload" button  
      to disable the file upload button. 
  </p> 
  
    <button onclick="myFunction()"> 
      Upload 
  </button> 
  
    <script> 
        function myFunction() { 
            
            var x = document.getElementById("myFile"); 
            x.disabled = true; 
            
            var y = document.getElementById( 
              "submit_text").innerHTML =  
                "Thank you For Submitting"; 
        } 
    </script> 
  
</body> 
  
</html> 
  
</body> 
  
</html>

輸出：
前：

後：

示例-2：創建<input>元素type = file。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        DOM Input FileUpload Object 
    </title> 
    <style> 
        h1 { 
            color:green; 
        } 
          
        h3 { 
            font-family:Impact; 
        } 
          
        body { 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1> 
      GeeksforGeeks 
  </h1> 
    <h3> 
      DOM Input FileUpload Object 
  </h3> 
  
    <button onclick="myFunction()"> 
      Create 
  </button> 
    <br> 
    <script> 
        function myFunction() { 
            
            var x =  
                document.createElement("INPUT"); 
            x.setAttribute("type", "file"); 
            document.body.appendChild(x); 
        } 
    </script> 
  
</body> 
  
</html>

輸出：
前：

後：

支持的瀏覽器：

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

相關用法

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