@Cat_usual

Как заполнить FormData всеми файлами?

index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<script src="https://snipp.ru/cdn/jQuery-Form-Plugin/dist/jquery.form.min.js"></script>

<form id="js-form" method="post" enctype="multipart/form-data" >
                        <input id="js-file" type="file" name="file[]" multiple="multiple">
                    </form>

                    <div id="result">
                        <!-- Сюда выводится результат из uploads.php -->
                    </div>
                    <style type="text/css">
                        #result {
                            padding: 10px 0;
                            font-size: 15px;
                        }
                        .success {
                            color: green;
                        }
                        .error {
                            color: red;
                        }
                    </style>

                    <script>
                        $('#js-file').change(function () {
                            var $input = $("#js-file");
                            var fd = new FormData;

                            fd.append('img', $input.prop('files')[0]);

                            $.ajax({
                                url: 'post.php',
                                data: fd,
                                processData: false,
                                contentType: false,
                                type: 'POST',
                                success: function (data) {
                                    alert(data);
                                }
                            });
                        });
                    </script>


post.php
<?php
$input_name = 'img';
ini_set('display_errors','Off');


echo var_dump($_FILES[$input_name]);
?>


Как мне передать из формы все файлы, а не 1 единственный, а то если сейчас массово загрузить файлы - отправится лишь один..
  • Вопрос задан
  • 496 просмотров
Решения вопроса 1
slo_nik
@slo_nik
Добрый вечер.
Как-то так
$(function() {
        $('#form-data').on('submit', function(e){
            e.preventDefault()
            var form = $(this); // Предположу, что этот код выполняется в обработчике события 'submit' формы
            var data = new FormData();  // Для отправки файлов понадобится объект FormData. Подробнее про него можно прочитать в документации - https://developer.mozilla.org/en-US/docs/Web/API/FormData

            // Сбор данных о файлах 
            var filesField = form.find('input[type="file"]');
            var fileName = filesField.attr('name');
            for(var i = 0; i < filesField.prop('files').length; i++){
              var file = filesField.prop('files')[i];
              data.append(fileName, file) ;
            }

            // Отправка данных
            var url = 'upload.php';

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                contentType: false,
                cache: false, 
                processData:false, 
                success: function(response) {
                    console.log(response)
                }           
            });  
        })          
    });

И выкиньте стили из формы, перенесите их куда положено.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы