Невозможно загрузить несколько файлов с помощью ajax и php

Я пытаюсь загрузить несколько файлов с помощью jquery и PHP. Но данные моей формы не отправляются на страницу PHP, как требуется. Пожалуйста, кто-нибудь может помочь мне написать правильный способ загрузки файлов?

Ниже мой код:

index.php:

<form id = "step17Form" action = "" name = "step17Form" method = "post" enctype = "multipart/form-data">
    <div style = "text-align :left; margin-left:15px"> <label><big>
                (<span style = "color: red; font-family: Comic Sans MS;"><small style = "font-weight: bold;">Note: Max File Size - 75KB</small></span>)</big></label>
        <br><br>
        <table style = "text-align: centre; width: 800px; margin-left:15px" border = "0" id = "upload" cellpadding = "6" cellspacing = "6">
            <tbody>
                <tr>
                    <td><br><label for = "stuphoto"><span style = "font-family: Comic Sans MS;">1. Student Photo</label></span>
                    </td>
                    <td><br><input id = "file-upload" name = "stuphoto" type = "file" accept = ".JPG" class = "custom-file-upload" style = "display: inline;"></td>
                </tr>

                <tr>
                    <td><br><label for = "stuadhar"><span style = "font-family: Comic Sans MS;">2. Aadhar Card</label></span>
                    </td>
                    <td><br><input name = "stuadhar" accept = ".jpg,.pdf" class = "custom-file-upload" type = "file" style = "display: inline;"></td>
                </tr>                                  
            </tbody>
        </table>
    </div>
    <br>
    <input type = "hidden" name = "reason" value = "step17" />
    <button type = "submit" id = "upload_save" class = "btn btn-success"> Save And Next >></button>
</form>

JS:

$('#upload_save').click(function(){
            event.preventDefault();        

            $.ajax({
                url: 'controller.php',
                type: 'post',
                dataType: 'json',
                data: new FormData($(this).parents('form')),
                processData: false,
                contentType: false,
                success: function(suc){
                    alert(suc['msg']);
                },
                error: function(error){
                    alert(error);
                }
            });   
    });

controller.php:

     $reason = $_POST['reason'];
        var_dump($_FILES);
if ($reason === "step17" ) {
        var_dump($_FILES);
        $status=array();
        $uploaded_file=array();
        $document_type=array("Photo","Aadhar");
        $i=0;
        $j=0;
       foreach($_FILES as $key=>$file)
       {

          $status= uploadImage($key, $file_size=5000000, "../..".FILE_PATH_LOC );
          if ($status['error']!==200 && $status['status']===false )
          {
            echo json_encode(array('status'=>'false','msg'=>"Error  ".$file['name']." ".$status['msg']));  
              break;
          }
       }
    }

Вывод var_dump ($ _ FILES): array (0) { } Проблема, с которой я столкнулся, заключается в том, что данные, которые я публикую, не распознаются в controller.php, и управление не попадает в условие if.

С какой именно проблемой вы столкнулись? Пожалуйста, подумайте о том, чтобы проверить как спросить, чтобы повысить свои шансы на получение ответов

suvartheec 11.06.2018 13:37

Проблема, с которой я столкнулся, заключается в том, что данные, которые я публикую, не распознаются в controller.php, и управление не попадает в условие if.

Yash Parekh 11.06.2018 13:42

Пожалуйста, подумайте о добавлении этой информации и точного сообщения об ошибке, которое вы можете получить, в вопрос, чтобы его видели люди, которые могут вам помочь.

suvartheec 11.06.2018 13:43

попробуйте удалить dataType: 'json',

Ahmed Sunny 11.06.2018 13:45

@suvartheec Вопрос отредактирован.

Yash Parekh 11.06.2018 13:48

@AhmedSunny Пытался, но это не помогло

Yash Parekh 11.06.2018 13:48

@AhmedSunny, почему ты это предлагаешь? dataType: "json" контролирует, как jQuery обрабатывает отклик для вызова ajax. И поскольку PHP явно отправляет JSON в качестве ответа, имеет смысл включить его. Этот параметр не имеет ничего общего с данными отправка, о чем и идет речь. Прочтите api.jquery.com/jquery.ajax и улучшите свое понимание того, для чего используются различные параметры.

ADyson 11.06.2018 13:50

@YashParekh $('#upload_save').click(function(){ должен быть $('#upload_save').click(function(event){, иначе event.preventDefault(); не будет работать, и ваша форма может отправить обратно вместо выполнения запроса ajax.

ADyson 11.06.2018 13:51

Также я думаю, что data: new FormData($(this).parents('form')), должен быть data: new FormData($(this).parents('form')[0]),, поскольку конструктор FormData ожидает собственный элемент формы JS, а не объект jQuery.

ADyson 11.06.2018 13:56

@ADyson В chrome он работает даже без указания события в качестве параметра. И форма не отправляется обратно в этом состоянии.

Yash Parekh 11.06.2018 13:57

Загляните в свой заголовок, посмотрите, как вы отправляете свои данные.

executable 11.06.2018 14:00

«В chrome он работает даже без указания события в качестве параметра» ... Я подозреваю, что он выполняет обычную обратную передачу. В зависимости от того, сколько времени потребуется для обновления страницы, также может запускать код ajax параллельно. Это нежелательный сценарий. Для правильной работы вам потребуется preventDefault (). Еще одна вещь, которую вы можете сделать, чтобы помочь с этим, - изменить <button type = "submit" на <button type = "button", что означает, что поведение кнопки по умолчанию не является обратной передачей.

ADyson 11.06.2018 14:05

@ADyson Это правда. Пытался, но все равно не сработало.

Yash Parekh 11.06.2018 14:26

"не сработало" что означает? что-нибудь изменился? Возможно, это не полное решение, но вы должны заметить некоторую разницу, если будете наблюдать достаточно внимательно. Вы одновременно пробовали и другое мое предложение (относительно объекта FormData)?

ADyson 11.06.2018 16:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
14
49
2

Ответы 2

Ступфото нужно сделать в виде массива. Извините, пожалуйста, попробуйте изменить эту строку

 <td><br><input id = "file-upload" name = "stuphoto" type = "file" accept = ".JPG" class = "custom-file-upload" style = "display: inline;"></td>

К

<td><br><input id = "file-upload" name = "stuphoto[]" type = "file" accept = ".JPG" class = "custom-file-upload" style = "display: inline;"></td>

а также

foreach($_FILES as $key=>$file)

к

foreach($_FILES['stuphoto']['name'] as $key=>$file)

У меня есть скрытый ввод в форме с именем reason, значение которого - step17. Элемент управления не входит в условие if в строке 3 файла controller.php.

Yash Parekh 11.06.2018 14:36

Вы пробовали data: new FormData ($ (this) .parents ('form') [0]); вместо data: new FormData ($ (this) .parents ('form')),

Sehdev 11.06.2018 14:47

Ваша проблема в том, что вы передаете объект jQuery в качестве параметра конструктору FormData, когда он принимает форму html

$('#upload_save').click(function(event){
        event.preventDefault();        

        $.ajax({
            url: 'controller.php',
            type: 'post',
            dataType: 'json',
            data: new FormData(this.form), // pass the form itself to the constructor
            processData: false,
            contentType: false,
            success: function(suc){
                alert(suc['msg']);
            },
            error: function(error){
                alert(error);
            }
        });   
});

Другие вопросы по теме