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>