6

хочу узнать как можно отследить с помощью JavaScript что файл допустим из рабочего стола перенесли в окно браузера, как это реализовано на этом сайте, https://imgur.com/, тут когда картинку из любой папки переносят, сразу же открывается окно, мол перетащите файл в окошко. Хотел бы поинтересоваться, как можно реализовать такую же логику?

1 ответ 1

1

// форма в которой храним данные
let formData = new FormData();

// Реагируем когда что-то перетаскивают
dropzone.addEventListener('dragenter', function(){
  dropzone.className="hover";
});

// Перестаём реигировать когда перетаскивание закончилось
['drop', 'dragleave'].forEach(eventName => dropzone.addEventListener(eventName, function(){
  dropzone.className="";
}));

// начинаем обрабатывать когда что-то сбросили нам
['drop', 'dragover'].forEach(eventName => dropzone.addEventListener(eventName, function(e){
  // отменяем стандартные действия
  e.preventDefault()
  e.stopPropagation()
  
  // тут у нас лежат перетащенные файлы
  let files = e.dataTransfer.files;
  
  // но это не мессив, поэтому делаем массивом
  files = [...files];
  
  files.forEach(file => {
    // переадаём файл форме
    formData.append('file', file);
    
    // начинаем делать предпросмотр
    // именно тут, просто создаём html-элементы и кидаем их настраницу
    let preview = document.createElement('li');
    file_list.appendChild(preview);
    
    // в идеале нужно проверить является ли файл картинкой
    makePreview(file).then(image => {
      let img = document.createElement('img');
      img.src = image;
      preview.appendChild(img);
    });
    
    // показываем кнопку "Отправить"
    submitBtn.className="";
    
  });
  
}, false));

// вот тут, через FileReader читаем изображание
function makePreview(file){
  let fr = new FileReader();
  
  return new Promise(resolve => {
    fr.readAsDataURL(file);
    // и когда оно готово, отдаём ответ
    fr.onloadend = () => resolve(fr.result)
  });
}

// отправка всего на сервер
submitBtn.onclick = function() {
  let url = null; // URL куда отправляем файлы
  fetch(url, {
    method: 'POST',
    body: formData
  })
  // всё заргузилось
  .then(resp => console.log(resp))
  // какие-то проблемы
  .catch(err => console.error(err))
}
#dropzone {
  width: 100%;
  height: 100px;
  border: 3px solid blue
}
#dropzone:before{
  content: "Перетащи сюда файл";
}

#dropzone.hover{
  border-color: green;
}

#dropzone.hover:before{
  content: "Отпускай, ловлю!";
}

li img{
  max-width: 100px;
  max-height: 100px;
}

.hidden{
  display:none;
}
<div id="dropzone" class=""></div>

<ul id="file_list"></ul>

<button id="submitBtn" class="hidden">Отправить</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.