ออบเจ็กต์ FileUpload อินพุต HTML DOM แสดงถึง <องค์ประกอบ
มาดูวิธีการสร้างอินพุต FileUpload วัตถุ -
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
var fileUploadBtn = document.createElement(“INPUT”); fileUploadBtn.setAttribute(“type”,”file”);
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของวัตถุอัปโหลดไฟล์อินพุต HTML DOM -
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ยอมรับ | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ accept ของปุ่มอัปโหลดไฟล์อินพุต |
| ออโต้โฟกัส | ส่งกลับและแก้ไขว่าปุ่มอัปโหลดไฟล์อินพุตควรได้รับการเน้นโดยอัตโนมัติหรือไม่ในการโหลดหน้าเว็บ |
| ปิดการใช้งาน | ส่งกลับและแก้ไขค่าเริ่มต้นของปุ่มอัปโหลดไฟล์อินพุต |
| ค่าดีฟอลต์ | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ accept ของปุ่มอัปโหลดไฟล์อินพุต |
| ไฟล์ | ส่งคืนอ็อบเจ็กต์ filelist ซึ่งอ้างอิงถึงไฟล์ทั้งหมดที่ถูกเลือกโดยปุ่มอัพโหลดไฟล์อินพุต |
| ฟอร์ม | ส่งกลับการอ้างอิงของแบบฟอร์มซึ่งแนบปุ่มอินพุตอัปโหลดไฟล์ |
| ทวีคูณ | ส่งกลับและแก้ไขว่าผู้ใช้สามารถเลือกหลายไฟล์ได้หรือไม่ |
| ชื่อ | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ชื่อของปุ่มอัปโหลดไฟล์อินพุต |
| จำเป็น | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ที่จำเป็นของปุ่มอัปโหลดไฟล์อินพุต |
| พิมพ์ | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ type ของปุ่มอัปโหลดไฟล์อินพุต |
| ค่า | ส่งกลับและแก้ไขเนื้อหาของแอตทริบิวต์ค่าของปุ่มอัปโหลดไฟล์อินพุต |
ตัวอย่าง
ให้เราดูตัวอย่างของวัตถุอัพโหลดไฟล์อินพุต 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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิกที่ “สีน้ำเงิน ” เพื่อสร้างปุ่มอัพโหลดไฟล์
