Jquery drag and drop добавление в input file

#javascript

Добрый вечер.
Не подскажите примеры добавления с помощью drag and drop путь до файла в input=file?    

Ответы

Ответ 1

Понадобилась возможность что б к одному елементу "файл" событие dropfile и событие
"присоединить файлы кнопкой" обрабатывалось одним серверным обработчиком. Задача бьётся
на две. Первое - получить dataTransfer, и вторая - отправить запрос. Со второй частью
бился дольше чем с первой. Я нашёл что это можно сделать только через XMLHttpRequest
продублировав POST-запрос с "изменениями", ввиду того что input.file защищён от изменений.
Вот реализация:



function drag1(e) {
  e.preventDefault();
  e.stopPropagation();
  document.getElementById("dragx1").className = "noover";
}

function drag2(e) {
  drag1(e);
  document.getElementById("dragx1").className = "over";
}

var drop_save, drop_saverdy = 0;

function drag_appendhlp(e, add) {
  var frm = e.target || e.srcElement;
  if (frm.tagName != "FORM") frm = frm.parentNode || frm.parentElement;
  if (frm.tagName != "FORM") frm = frm.parentNode || frm.parentElement;
  for (var i = 0; i < frm.elements.length; i++) {
    if ((frm.elements[i].tagName == "INPUT") && (frm.elements[i].type == "file")) {
      if (!add) {
        frm.elements[i].disabled = true;
        return frm.elements[i].name + ";" + frm.elements[i].accept;
      }
    } else if ((add) && (drop_save) && (frm.elements[i].name != "")) drop_save.append(frm.elements[i].name,
frm.elements[i].value);
  }
}

function drag3(e) {
  drag1(e);
  var i, q = "",
    acpt, acc = drag_appendhlp(e, false);
  acpt = acc.split(";")[0];
  drop_save = new FormData();
  for (i = 0; i < e.dataTransfer.files.length; i++) {
    //TODO: Обработка mime acc
    drop_save.append(acpt + (e.dataTransfer.files.length > 1) ? "[]" : "", e.dataTransfer.files[i]);
    q += ((i > 0) ? ", " : "") + e.dataTransfer.files[i].name;

  }
  drop_saverdy = 0;
  document.getElementById("ret").innerHTML = q;
}


function drag_submit(e) {
  if (drop_save) {
    var req = new XMLHttpRequest();
    req.open("POST", e.target.action || location.href, false);
    if (drop_saverdy++ == 0) drag_appendhlp(e, true);
    req.onreadystatechange = function() {
      try {
        if (request.readyState != 4) {
          return;
        }
        if (request.status == 200) {
          document.write(request.responseText); // Перенаправить запрос 
        } else { /*error*/ };
      } catch (e1) {};
    };

    try {
      req.send(drop_save);
    } catch (e2) {};
    e.preventDefault();
    e.stopPropagation();
    return false;
  };
  return true;
}
.over {
  color: green;
}

  

    
    
    


 123
    

    

  




Функция drag_appendhlp - определяет name самого input(file), и она же одновременно
дописывает в запрос FormData данные. Функция drag_submit отрабатывает запрос (вместо
стандартного обработчика) в случае передачи файлов по drag&drop, и желательно что б
все валидаторы прошли до неё, иначе нужно переписывать drag3 так, что б файлы хранить
в отдельной переменной.