Beispiel:File-Upload-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload - 4</title>
  <style>
    input[type="file"] {
      display: block;
      margin: 1em;
      padding: 1em;
      border: thin dotted;
      background: #fff;
      cursor: pointer;
    }
    #dropZone {
      background-color: #f0f0f0;
      border: medium dashed #c82f04;
      transition: background-color 0.3s;
    }
    #dropZone.dragover {
      background-color: #e0e0ff;
    }
    form {
      margin: 1em;
      padding: 1em;
      border: thin dotted;
      background: #ddd;
    }
    #dateiListe, #thumbnailListe {
      padding-left: 1.5em;
    }
		#thumbnailListe li { display: inline;}
    #thumbnailListe img {
      max-width: 100px;
      max-height: 100px;
      margin: 0.5em;
      border: thin solid #ccc;
    }
  </style> 
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const fileInput = document.getElementById('dateien');
      const dropZone = document.getElementById('dropZone');
      
      fileInput.addEventListener('change', dateiauswahlGeändert, false);

      // Drag and Drop event listeners
      dropZone.addEventListener('dragenter', preventDefaults, false);
      dropZone.addEventListener('dragover', preventDefaults, false);
      dropZone.addEventListener('dragleave', preventDefaults, false);
      dropZone.addEventListener('drop', handleDrop, false);

      dropZone.addEventListener('dragenter', () => dropZone.classList.add('dragover'), false);
      dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'), false);
      dropZone.addEventListener('drop', () => dropZone.classList.remove('dragover'), false);
    });

    // Prevent default behaviors on drag and drop events
    function preventDefaults(e) {
      e.preventDefault();
      e.stopPropagation();
    }

    // Handle files dropped into the drop zone
    function handleDrop(e) {
      preventDefaults(e);
      const dt = e.dataTransfer;
      const files = dt.files;
      dateiauswahlGeändert({ target: { files } });
    }

    function dateiauswahlGeändert(event) {
      const dateiliste = document.getElementById('dateiListe');
      const thumbnailListe = document.getElementById('thumbnailListe');

      dateiliste.innerHTML = '';      
      thumbnailListe.innerHTML = '';  

      for (const file of event.target.files) {
        // Add file details to dateiListe
        dateiliste.insertAdjacentHTML('beforeend', 
          `<li><strong>${file.name}</strong> (${file.type || 'n/a'}) - ${file.size} bytes</li>`);

        // Check if file is an image
        if (file.type.startsWith('image/')) {
          const thumbnailURL = URL.createObjectURL(file);
          const listItem = document.createElement('li');
          const imgElement = document.createElement('img');

          imgElement.src = thumbnailURL;
          imgElement.alt = file.name;
          imgElement.onload = () => URL.revokeObjectURL(imgElement.src);  // Release memory when loaded

          listItem.appendChild(imgElement);
          thumbnailListe.appendChild(listItem);
        }
      }
    }
  </script>
</head>
<body>
  <h1>File Upload mit Drag &amp; Drop</h1>
  
  <form id="dropZone" action="manage_uploads.php" method="post" enctype="multipart/form-data">
    <label>Wählen Sie die hochzuladenden Dateien von Ihrem Rechner aus:
      <input id="dateien" name="files[]" type="file" multiple> 
			Ziehen Sie die Dateien hierher, um sie hochzuladen.
    </label>  



    <ul id="dateiListe"></ul> 

    <ul id="thumbnailListe"></ul>

    <button>hochladen</button>
  </form>
  
</body>
</html>