কম্পিউটার টিউটোরিয়াল

HTML DOM Input FileUpload files Property

HTML DOM FileUpload files প্রপার্টি একটি FileList অবজেক্ট রিটার্ন করে যাতে ফাইল আপলোড বাটনে নির্বাচিত সব ফাইল থাকে।

সিনট্যাক্স

object.files

উদাহরণ

<!DOCTYPE html> <html> <head> <style>    body{       text-align:center;       background-color:#52B2CF;       color:#fff;    }    .btn{       background-color:coral;       border:none;       height:2rem;       border-radius:50px;       width:60%;       margin:1rem auto;       display:block;       color:#fff;       outline:none;    }    .show{       font-size:1.2rem;       color:#fff;       font-weight:bold;    } </style> </head> <body> <h1>DOM FileUpload files Property Example</h1> <p>Select some files</p> <input type="file" class="file-upload-btn" multiple> <button onclick = "showFiles()" class = "btn">Click me to see all selected file</button> <div class="show"></div> <script>    function showFiles() {       var fileBtn = document.querySelector(".file-upload-btn");       var showMsg = document.querySelector(".show");       showMsg.innerHTML='';       if(fileBtn.files.length === 0){          showMsg.innerHTML = "Please select at least one file!!";       } else {          showMsg.innerHTML = "You selected these files:";          for(let i=0;i<fileBtn.files.length;i++) {             showMsg.innerHTML += '<p>' + fileBtn.files[i].name + '<p>';          }       }    } </script> </body> </html>

আউটপুট

নিচের আউটপুটটি দেখাবে:

HTML DOM Input FileUpload files Property

"Click me to see all selected file" বাটনে ক্লিক করলে সব নির্বাচিত ফাইল দেখাবে।

HTML DOM Input FileUpload files Property

  1. HTML DOM Input Hidden form প্রপার্টি

  2. HTML DOM Input Hidden value প্রপার্টি

  3. HTML DOM Input FileUpload autofocus প্রপার্টি

  4. HTML DOM Input FileUpload accept প্রপার্টি