Drag & Drop File Uploader - PullRequest
Новая
       61

Drag & Drop File Uploader

0 голосов
/ 02 апреля 2020

Я использую скрипт CodeBoxx Drag & Drop (https://code-boxx.com/simple-drag-and-drop-file-upload/), и сейчас я пытаюсь использовать несколько загружаемых div, потому что я хочу вставить их в таблицу. Но очевидно, что с множеством с одинаковым именем скрипт не работает. Поэтому я добавил счетчик, и теперь у каждого есть его собственное имя: 

<!DOCTYPE html>
<html>
  <head>
    <script src="1-simple-upload.js"></script>
    <style>
      div {
        width: 200px;
        height: 100px; 
        background: #f4b342; 
        padding: 10px;
          margin: 10px;
      }
    </style>
  </head>
  <body>
    <?
      $counter=1;
      while($counter<=5){
    ?>
      <div id="uploader<? echo $counter; ?>" title="<? echo $counter; ?>"><b>Space <? echo $counter; ?></b> - Drop Files Here</div>
    <?
          $counter++;
      }
    ?>
  </body>
</html>

Теперь у меня проблема в том, что в файле. js я не могу получить правильный идентификатор использованного файла. загрузить изображение. Вот код: 

window.addEventListener("load", function(){
  // GET THE DROP ZONE
  var uploader = document.getElementById('uploader');
  var id = document.getElementById('uploader').title;


  // STOP THE DEFAULT BROWSER ACTION FROM OPENING THE FILE
  uploader.addEventListener("dragover", function (e) {
    e.preventDefault();
    e.stopPropagation();
  });

  // ADD OUR OWN UPLOAD ACTION
  uploader.addEventListener("drop", function (e) {
    e.preventDefault();
    e.stopPropagation();

    // RUN THROUGH THE DROPPED FILES + AJAX UPLOAD
    for (var i = 0; i < e.dataTransfer.files.length; i++) {
      var xhr = new XMLHttpRequest(),
          data = new FormData();
      data.append('file-upload', e.dataTransfer.files[i]);
      xhr.open('POST', 'simple-upload.php?ID='+id, true);
      xhr.onload = function (e) {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            // OK - Do something
            // console.log(xhr.responseText);
            alert("Upload OK!"+id);
          } else {
            // ERROR - Do something
            // console.error(xhr.statusText);
            alert("Upload error!");
          }
        }
      };
      xhr.onerror = function (e) {
        // ERROR - Do something
        // console.error(xhr.statusText);
        alert("Upload error!");
      };
      xhr.send(data);
    }
  });
});

Надеюсь, вы можете мне помочь, на php Я лучше, чем на js;)

...