HTML DOM इनपुट फाइल अपलोड files प्रॉपर्टी

परिचय

HTML DOM फाइल अपलोड 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 फाइल अपलोड files प्रॉपर्टी उदाहरण</h1>
<p>कुछ फाइलें चुनें</p>
<input type="file" class="file-upload-btn" multiple>
<button onclick="showFiles()" class="btn">सभी चुनी गई फाइलें देखें</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 = "कृपया कम से कम एक फाइल चुनें!!";
    } else {
      showMsg.innerHTML = "आपने ये फाइलें चुनी हैं:";
      for (let i = 0; i < fileBtn.files.length; i++) {
        showMsg.innerHTML += '<p>' + fileBtn.files[i].name + '</p>';
      }
    }
  }
</script>
</body>
</html>

आउटपुट

फाइलें चुनने के बाद "सभी चुनी गई फाइलें देखें" बटन पर क्लिक करने पर सभी फाइलों के नाम सूचीबद्ध होंगे।