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
相关用法
- HTML Input FileUpload value用法及代码示例
- HTML Input FileUpload accept用法及代码示例
- HTML Input FileUpload autofocus用法及代码示例
- HTML Input FileUpload disabled用法及代码示例
- HTML Input FileUpload form用法及代码示例
- HTML Input FileUpload files用法及代码示例
- HTML Input FileUpload name用法及代码示例
- HTML Input FileUpload type用法及代码示例
- HTML Input FileUpload required用法及代码示例
- HTML Input FileUpload multiple用法及代码示例
- HTML DOM Object用法及代码示例
- HTML DOM Input Week用法及代码示例
- HTML DOM Input Button用法及代码示例
- HTML DOM Input Submit用法及代码示例
- HTML DOM Input URL用法及代码示例
- HTML DOM Input Time用法及代码示例
- HTML DOM Input Hidden用法及代码示例
- HTML DOM Input Range用法及代码示例
- HTML DOM Input Reset用法及代码示例
- HTML DOM Input Number用法及代码示例
- HTML DOM Input Password用法及代码示例
- HTML DOM Input Color用法及代码示例
- HTML DOM Input Datetime用法及代码示例
- HTML DOM Input Month用法及代码示例
注:本文由纯净天空筛选整理自raunakbhagwani大神的英文原创作品 HTML | DOM Input FileUpload Object。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。