HTML DOM Input FileUpload 对象

htmlweb developmentfront end technology更新于 2025/6/28 21:00:17

HTML DOM Input FileUpload 对象表示 HTML 文档中 type="file"的 <input< 元素。

让我们看看如何创建输入 FileUpload 对象 −

语法

以下是语法 −

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

属性

以下是 HTML DOM Input FileUpload 对象的属性 −

属性	说明
accept	返回并修改输入文件上传按钮的 accept 属性值。
autofocus	返回并修改输入文件上传按钮在页面加载时是否自动获得焦点。
disabled	返回并修改输入文件上传按钮的默认值按钮。
defaultValue	返回并修改输入文件上传按钮的 accept 属性值。
files	返回一个文件列表对象，该对象引用由输入文件上传按钮选择的所有文件。
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>