За последние 24 часа нас посетили 20556 программистов и 1103 робота. Сейчас ищут 823 программиста ...

Обработка 'ondrop'. Перенос файлов в FormData().

Тема в разделе "JavaScript и AJAX", создана пользователем Arhitec, 15 окт 2018.

  1. Arhitec

    Arhitec Новичок

    С нами с:
    13 июл 2016
    Сообщения:
    43
    Симпатии:
    1
    Доброго всем дня!
    Самостоятельно решить эту задачу не получается.

    Есть форма приема перетаскиваемых файлов:

    HTML:
    1. <form id="upload" method="post" action="aw-upload.php" enctype="multipart/form-data">
    2.             <div class="aw-dropzone-none" id="drag" ondragenter="dropenter(event);" ondragover="dropenter(event);" ondragleave="dropleave();" ondrop="return dodrop(event);" onClick="return browse(event);">
    3.                 <div class="aw-wrapp-content-dropzone">
    4.                     <div class="aw-dropzone-icon-none" id="aw-dropzone-icon"></div>
    5.                     <div class="aw-dropzone-text-none" id="aw-dropzone-text">перетащите файлы сюда<br>или нажмите на зону загрузки файлов</div>
    6.                 </div>
    7.             </div>
    8.             <input type="file" name="upl" id="upl" multiple />
    9.         </form>
    Есть обработчик принятых файлов:
    Код (Javascript):
    1. function dodrop(e)
    2. {
    3.     // Подавить событие перетаскивания файла
    4.     e.stopPropagation();
    5.     e.preventDefault();
    6.      
    7.     var formData = new FormData();
    8.     var dt = e.dataTransfer;
    9.     var files = dt.files; // здесь лежат сами файлы и информация о них.
    10.      
    11.     for (var i = 0; i < files.length; i++)
    12.     {
    13.         formData.append('file[]', files[i]); // Прикрепляем к форме все загружаемые файлы.
    14.         console.log(formData.file[i].name);
    15.     }
    16.  
    17.     return false;
    18. }
    Ожидаю в результате отображение инфы по загружаемым файлам в консоли. Однако в ответ консоль выдает 'undefine'. Не пойму почему. Прошу помочь разобраться в этом вопросе.
     
    #1 Arhitec, 15 окт 2018
    Последнее редактирование: 15 окт 2018
  2. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    Так тоже ничего нет? :
    Код (Javascript):
    1. console.log(formData.file[i]);
     
  3. Arhitec

    Arhitec Новичок

    С нами с:
    13 июл 2016
    Сообщения:
    43
    Симпатии:
    1
    Консоль выдает ошибку: "Uncaught TypeError: Cannot read property '0' of undefined at dodrop"
    --- Добавлено ---
    Я перефразирую вопрос.
    Мне нужно, чтобы файлы, которые были перехвачены при перетаскивании в блок 'DIV', помещены в formData()? чтобы затем отправить их через AJAX. Может я вообще не в верном направлении двигаюсь?
     
  4. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    Поидее это не нужно, если ваш files это массив, просто передаете его на сервер и все. Если используете jquery то так:
    Код (Javascript):
    1. $.post( "test.php", {files: files}, function( data ) {
    2.     data // это ответ от сервера если нужен
    3. }, "json");
    Вообще хоть строку передать можно, и распарсить там.
     
  5. Arhitec

    Arhitec Новичок

    С нами с:
    13 июл 2016
    Сообщения:
    43
    Симпатии:
    1
    Проблема в том, что я не умею пользоваться таким способом отправки. Далее же хочется обрабатывать ответ от сервера. А по сути, кроме Ajax пока ничего не умею :)