Перетащите файл открытия зоны вместо загрузки на сервер - PullRequest
Новая
       24

Перетащите файл открытия зоны вместо загрузки на сервер

0 голосов
/ 30 мая 2019

У меня есть зона выгрузки файлов, одна из которых позволяет вам выбрать файл, а другая - зона выгрузки с перетаскиванием.

Выбор файла и нажатие кнопки «Отправить» работает отлично. Зона перетаскивания, однако, открывает / загружает файл вместо загрузки.

Я думаю, что мой PHP-код правильный, потому что файл правильно загружается на сервер при выборе и загрузке.

Это код JQuery, в котором, я думаю, есть возможная ошибка. 

+ function($) {
    'use strict';

    // UPLOAD CLASS DEFINITION
    // ======================

    var dropZone = document.getElementById('drop-zone');
    var uploadForm = document.getElementById('js-upload-form');

    var startUpload = function(files) {
        console.log(files)
    }

    uploadForm.addEventListener('submit', function(e) {
        var uploadFiles = document.getElementById('js-upload-files').files;
        e.preventDefault()

        startUpload(uploadFiles)
    })

    dropZone.ondrop = function(e) {
        e.preventDefault();
        this.className = 'upload-drop-zone';

        startUpload(e.dataTransfer.items)
    }

    dropZone.ondragover = function() {
        this.className = 'upload-drop-zone drop';
        return false;
    }

    dropZone.ondragleave = function() {
        this.className = 'upload-drop-zone';
        return false;
    }

}(jQuery);

Вот HTML-код для лучшей справки: 

<div class="container">
      <div class="panel panel-default">
        <div class="panel-heading"><strong>Upload CSV File</strong> <small>Insert Leads to MongoDB</small></div>
        <div class="panel-body">

          <!-- Standard Form -->
          <h4>Select files from your computer</h4>
          <form action="" method="post" enctype="multipart/form-data" id="js-upload-form">
            <div class="form-inline">
              <div class="form-group">
                <input type="file" name="file" id="js-upload-files">
              </div>
              <button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit">Upload files</button>
            </div>
          </form>

          <!-- Drop Zone -->
          <h4>Or drag and drop files below</h4>
          <div class="upload-drop-zone" id="drop-zone">
            Just drag and drop files here
          </div>
        </div>
      </div>

Я хочу, чтобы зона перетаскивания также загружала файл на сервер вместо открытия.

...