Помогите с DragNDrop на чистом js?

228

07 января 2018, 08:02

Я решил схитрить и у меня это не получилось. В итоге запутался еще больше. Хотел просто 1) переносить файлы DnD или 2) нажимать на label, и все должно выглядеть будто я указал файлы через input[type=file]. Для этого я начал с label. Сначала уменьшил сам input (width и height сделал 0.5px), чтобы его стало не видно. Затем, если нажать на label, получается так, будто нажали на input. Кроме того, при input.onchange я сделал, чтобы label.innerHTML становилось названием файла. С этим вроде разобрался. Но вот с DnD не все так просто. Я наивный действовал по такой логике. Закидываю файл DnD, при событии ondrop файл передается input.files[0], срабатывает input.onchange и в label появляется название файла, далее нажимаю ОК и файл на локальном сервере. Но практика показала, что это не работает. Как правильно настроить DnD, чтобы и label менялся и потом спокойно отправлять файл на сервер? В данном примере пробовал хотя бы на одном файле - не стал делать цикл для нескольких. Спасибо!

<html>
<head>
<meta charset="utf8">
<style>
    html, body, div, p{
        padding: 0;
        margin: 0;
    }
    #dropHere{
        box-sizing: border-box;
        width: 50%;
        height: 100px;
        border: 1px dotted pink;
        margin-left: 25%;
    }
    input[type=file]{
        width: 0.5px;
        height: 0.5px;
    }
    label[for=file]{
        cursor: pointer;
    }
</style>
</head>
<body>
<div id="dropHere">
<form method="POST" enctype="multipart/form-data">
        <input id="input" type="file" name="upload[]" multiple>
        <label id="label" for="input">Добавить файлы</label><br><br>
        <button>OK!</button>
</form>
</div>
<script>
var dropZone = document.querySelector('#dropHere');
input = document.querySelector('#input');
label = document.querySelector('#label');
input.onchange = function(){
    if(input.files && input.files.length > 1){
        label.innerHTML = 'Выбрано файлов: ' + input.files.length;
    }
    if(input.files && input.files.length == 1){
        label.innerHTML = input.files[0].name;
    }
}
dropZone.ondragover = function(e){
  e.preventDefault();
}
dropZone.ondrop = function(e){
  e.preventDefault();
  console.log( e.dataTransfer.items[0].getAsFile() );
  input.files[0] = e.dataTransfer.items[0].getAsFile().name;
}