событие ondrop не работает

Контекст: Работа на веб-странице, позволяющая перетаскивать на него файл csv и загружать данные на сервер MySQL. Запуск на Widnows 7 SP1, работающий на Apache 2.4, тестирование на localhost с помощью Chrome.событие ondrop не работает

Проблема: попытка создать страницу загрузки, но я не могу получить событие ondrop. Я избежал поведения по умолчанию в своем понимании, но по-прежнему не получил ответа от веб-страницы в реальном времени. Я также сделал то же самое с событием ondragenter (не показано) без изменений. Лечение заключается в том, что файл загружается через браузер в папку с загрузкой по умолчанию, что также происходит при отбрасывании файла на оставшуюся страницу (ergo default treatment?). Я считаю, что API перетаскивания является родным для большинства браузеров и не требует никакой библиотеки. Это неправильно, и мне не хватает определений?

Код:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <style> 
      #drop_zone { 
       background-color: #EEE; 
       border: #999 5px dashed; 
       width: 290px; 
       height: 200px; 
       padding: 8px; 
       font-size: 18px; 
      } 
     </style> 
     <script> 
     function drag_enter(event) { 
      document.getElementById("drop_zone").style.border = "5px dotted red"; 
     function drag_drop(event) { 
      event.preventDefault(); 
      alert(event.dataTransfer.files[0]); 
      alert(event.dataTransfer.files[0].name); 
      alert(event.dataTransfer.files[0].size+" bytes"); 

     </script> 
    </head> 
    <body> 

    <h1>File Upload Drop Zone</h1> 
    <div id="drop_zone" ondragenter="drag_enter(event)" ondrop="drag_drop(event)" ondragover="return false"></div> 

    </body> 
</html>

Дополнительный вопрос: может кто-то объяснить на события вызывающей HTML, что параметр (так называемый event) передается функция представляет? Это конкретный идентификатор события? Можете ли вы назвать вызывающего события этим? Не уверен, что я понимаю взаимосвязь между вызывающим и функцией в отношении этого параметра. Онлайн-документация обычно глазурует, объясняя ее использование.

Спасибо, что у вас есть время, чтобы рассмотреть мой вопрос. Теплые отношения,

источник

2016-12-23 nbayly

Похоже, вы пропустили некоторые закрытия } в конце каждого из ваших функций, это:

function drag_enter(event) { 
      document.getElementById("drop_zone").style.border = "5px dotted red"; 
     function drag_drop(event) { 
      event.preventDefault(); 
      alert(event.dataTransfer.files[0]); 
      alert(event.dataTransfer.files[0].name); 
      alert(event.dataTransfer.files[0].size+" bytes");

должно быть:

function drag_enter(event) { 
    document.getElementById("drop_zone").style.border = "5px dotted red"; 
} 
function drag_drop(event) { 
    event.preventDefault(); 
    alert(event.dataTransfer.files[0]); 
    alert(event.dataTransfer.files[0].name); 
    alert(event.dataTransfer.files[0].size + " bytes"); 
}

Вот working example

источник

2016-12-23 17:44:56 Pabs123

Boooom, удивительный! Я ранил голову, думая, что это что-то большое. Маленькие детали имеют значение. Я считаю это правильным ответом. Если у кого-то есть импульс, чтобы ответить на мой второй вопрос, я также смогу принять их с похвалой и поддельными интернет-точками. – nbayly

событие ondrop не работает

ответ

Смежные вопросы