HTML DOM 檔案上傳物件

HTML DOM input FileUpload 物件表示 HTML 文件中 type=”file” 的 <input< 元素。

讓我們看看如何建立 input FileUpload 物件：

語法

以下是語法：

var fileUploadBtn = document.createElement(“INPUT”);
fileUploadBtn.setAttribute(“type”,”file”);

屬性

以下是 HTML DOM input fileupload 物件的屬性：

屬性	解釋
accept	返回並修改檔案上傳按鈕的 accept 屬性值。
autofocus	返回並修改頁面載入時檔案上傳按鈕是否應自動獲得焦點。
disabled	返回並修改檔案上傳按鈕的預設值。
defaultValue	返回並修改檔案上傳按鈕的 accept 屬性值。
files	返回一個 FileList 物件，該物件引用檔案上傳按鈕選擇的所有檔案。
forms	返回包含檔案上傳輸入按鈕的表單的引用。
multiple	返回並修改使用者是否可以選擇多個檔案。
name	返回並修改檔案上傳按鈕的 name 屬性值。
required	返回並修改檔案上傳按鈕的 required 屬性值。
type	返回並修改檔案上傳按鈕的 type 屬性值。
value	返回並修改檔案上傳按鈕的 value 屬性內容。

示例

讓我們看一個 HTML DOM 檔案上傳物件的示例：

線上演示

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
   }
   .btn{
      background-color:lightblue;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
      display:block;
   }
</style>
</head>
<body>
<h1>DOM Fileupload Object Example</h1>
<button onclick="createFileBtn()" class="btn">Click me to create an input file upload button</button>
<script>
   function createFileBtn() {
      var fileUploadBtn = document.createElement("INPUT");
      fileUploadBtn.setAttribute("type", "file");
      document.body.appendChild(fileUploadBtn);
   }
</script>
</body>
</html>