За последние 24 часа нас посетили 18280 программистов и 1581 робот. Сейчас ищут 1157 программистов ...

Загрузка файла с помощью перетаскивания его в окно Браузера

Тема в разделе "JavaScript и AJAX", создана пользователем Sergey_k6, 3 мар 2024.

  1. Sergey_k6

    Sergey_k6 Новичок

    С нами с:
    28 май 2022
    Сообщения:
    32
    Симпатии:
    0
    Добрый день подскажите пожалуйста что делаю не так:

    Код (Javascript):
    1.            
    2.             let elem_ID        = 'drop_zone_table';
    3.             let MyDropZone     = document.getElementById(elem_ID);
    4.             let hoverClassName = 'hover';
    5.            
    6.            
    7.             // Блокировка зоны дропа при перетаскивании //
    8.             window.addEventListener(\"dragenter\", function(e) {
    9.            console.log('e.target.id => '+e.target.id);
    10.              if (e.target.id != elem_ID) {
    11.                e.preventDefault();
    12.                e.dataTransfer.effectAllowed = 'none';
    13.                e.dataTransfer.dropEffect      = 'none';
    14.              } else if (e.target.id != elem_ID && MyDropZone) {
    15.                e.preventDefault();
    16.                MyDropZone.classList.add(hoverClassName);
    17.              }
    18.            });
    19.  
    20.            window.addEventListener(\"dragover\", function(e) {
    21.              if (e.target.id != elem_ID) {
    22.                e.preventDefault();
    23.                e.dataTransfer.effectAllowed = 'none';
    24.                e.dataTransfer.dropEffect      = 'none';
    25.              } else if (e.target.id != elem_ID && MyDropZone) {
    26.                e.preventDefault();
    27.                MyDropZone.classList.add(hoverClassName);
    28.              }
    29.            });
    30.  
    31.            window.addEventListener(\"drop\", function(e) {
    32.              if (e.target.id != elem_ID) {
    33.                e.preventDefault();
    34.                e.dataTransfer.effectAllowed = 'none';
    35.                e.dataTransfer.dropEffect      = 'none';
    36.              } else if (e.target.id != elem_ID && MyDropZone) {
    37.                e.preventDefault();
    38.                MyDropZone.classList.remove(hoverClassName);
    39.                let div_message = 'insert_massage_upload';
    40.                $('#'+div_message).html('');
    41.              
    42.                const files = Array.from(e.dataTransfer.files)[0];
    43.                let F_name = files['name'];
    44.                var type_f = F_name.substr(F_name.lastIndexOf('.'),(F_name.length - F_name.lastIndexOf('.')));
    45.                var arr = ['.pdf','.PDF','.xls','.XLS','.xlsx','.XLSX','.docx','.DOCX','.doc','.DOC','.jpg','.JPG','.rar','.RAR'];
    46.                if(jQuery.inArray(type_f, arr) == -1)
    47.                { $('#'+div_message).html('Неправильный тип файла<br>Используйте: pdf, xls, xlsx, doc, docx, jpg, rar'); return false; }
    48.                alert('полетели!');
    49.              }
    50.            });
    Суть в том что этот код должен разрешить перетаскивание и загрузку элемента только если его Drop-нуть в зоне элемента drop_zone_table

    Но пока все элементы полностью закрыты для Drop.

    Код HTML:
    HTML:
    1. <table id=\"drop_zone_table\" bgcolor=\"#ffffff\" border=1 cellpadding=3 cellspacing=0 wight=100%>
    2.             <tr>
    3.                 <td align=\"center\">
    4.                     <table border=0 cellpadding=0 cellspacing=1>
    5.                     <tr>
    6.                         <td colspan=2 align=\"center\">
    7.                             <table border=0 cellpadding=0 cellspacing=0>
    8.                             <tr>
    9.                                 <td>
    10.                                     <form name=\"upload_form\" action=\"to do\" method=\"post\" enctype=\"multipart/form-data\">
    11.                                         <input type=\"file\" id=\"uploadfile1\" name=\"n_uploadfile1\" style=\"wight:460px;\">
    12.                                     </form>
    13.                                 </td>
    14.                             </tr>
    15.                             <tr>
    16.                                 <td align=\"center\" style=\"font-size:13px; padding: 10px 8px 10px 8px; color:#ff0000;\">
    17.                                     <div id=\"insert_massage_upload\">&nbsp;</div>
    18.                                 </td>
    19.                             </tr>
    20.                             </table>
    21.                         </td>
    22.                     </tr>
    23.                     <tr>
    24.                         <td align=\"left\">
    25.                             <div id=\"Insert_foto\" onclick=\"something doing\" onMouseOver=\"this.style.color='#c41e3a'; this.style.textDecoration='underline';\" onMouseOut=\"this.style.color='#0000cc'; this.style.textDecoration='none';\"  style=\"cursor:pointer; color:#0000cc; font-size: 14px;\">Добавить файл</div>
    26.                         </td>              
    27.                         <td align=\"right\">
    28.                             <div id=\"Exit_add_user_griad_button\" onclick=\"something doing\" onMouseOver=\"this.style.color='#c41e3a'; this.style.textDecoration='underline';\" onMouseOut=\"this.style.color='#0000cc'; this.style.textDecoration='none';\"  style=\"cursor:pointer; color:#0000cc; font-size: 14px;\">Закрыть</div>
    29.                         </td>
    30.                     </tr>
    31.                     </table>
    32.                 </td>
    33.             </tr>
    34.             </table>
    Описание функционала я взял из:
    1. Блокировка перетаскивания
    https://utyatnishna.ru/info/51992/p...g-and-dropped-file?ysclid=ltafjtqmoj761147123
    2. Описание функционала загрузки файла
    https://habr.com/ru/articles/752268/
     
  2. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    425
    Симпатии:
    79
    Адрес:
    Бавария, Германия
    Добрый день!

    1. Видимо, Вы забыли показать PHP код, в котором оператором echo выводится JS и HTML.
    Если же это не так, то необходимо убрать экранирование кавычек, иначе
    получите из JS -> Uncaught SyntaxError: invalid escape sequence

    2. У Вас проблема в том, что Вы не определили все DOM-элементы.
    В HTML нет тэгов с атрибутами id: "drop_zone_table", "div_message"
    Вы некорректно определяете hoverClassName. Что-то напутано в СSS
    (:hover - псевдо класс, а не имя класса).

    3. У Вас код на native JavaScript. Однако в нём есть и несколько строк на jQuery
    Код (Javascript):
    1. if(jQuery.inArray(type_f, arr) == -1)
    2. {
    3.    $('#'+div_message).html('Неправильный тип файла<br>Используйте: pdf, xls, xlsx, doc, docx, jpg, rar');
    4.    return false;
    5. }
    из-за двух строк нет необходимости подключать jQuery, тоже на native JavaScript:
    Код (Javascript):
    1. //нужно добавить тэг <div id="div_message"></div>
    2. div_message = document.getElementById("div_message");
    3. if(arr.includes(type_f))
    4. {
    5. div_message.innerHTML = 'Неправильный тип файла<br>Используйте: pdf, xls, xlsx, doc, docx, jpg, rar');
    6. return false;
    7. }
    можно изменить определение file extensions:
    Код (Javascript):
    1. //эту строку можно заменить
    2. var type_f = F_name.substr(F_name.lastIndexOf('.'),(F_name.length - F_name.lastIndexOf('.')));
    3. //на эту
    4. var type_f = /[^.]+$/.exec(F_name);
    4. Советую Вам убрать из HTML тэгов атрубуты style, onMouseOver, onMouseOut, все свойства определить в CSS
    и применить, где это необходимо псевдо класс :hover
    Так же желательно убрать из тэгов атрубуты onclick, заменив их на on.click() или addEventListener("click",...) в JS.
    Удачи!
     
    #2 Vladimir Kheifets, 3 мар 2024
    Последнее редактирование: 3 мар 2024
    Sergey_k6 и don.bidon нравится это.
  3. Sergey_k6

    Sergey_k6 Новичок

    С нами с:
    28 май 2022
    Сообщения:
    32
    Симпатии:
    0
    Владимир, добрый день, спасибо за ответ.
    Я дорабатываю старый код, поэтому достаточно много странностей.
    Разобраться сложно.

    Я вышел из ситуации, сделав всплывающее окно, на котором в элементе Body стоит событие перехвата drop.
    Вроде работает. Все довольны, меня не трогают. :)

    Я не смог добиться чтобы закрыть drop на window или body, но при этом разрешить его на какой-то дочке.
    Если пришлёте DOM с JS который это позволит, я вам буду при-много благодарен.
     
  4. don.bidon

    don.bidon Активный пользователь

    С нами с:
    28 мар 2021
    Сообщения:
    914
    Симпатии:
    143
    Я б подсмотрел код с какого-нибудь яндекс.диска, где это уже реализовано.