Горячая отправка файлов размером более 1 МБ с помощью ajax-запроса?

Question

Я пытаюсь отправить файл размером более 1 МБ, нет проблем с размером файла, если я отправляю запрос с помощью действия HTML-формы.но, если я пытаюсь отправить эти файлы с помощью ajax в php, он показывает ошибку в $ _FILES, если размер файла всего 1 МБ или больше.

мои настройки php.ini по умолчанию:

php_value upload_max_filesize 2G
php_value post_max_size 2G
php_value max_input_time 300
php_value max_execution_time 300

Я отправляю данные с помощью ajax здесь:

let formData = new FormData();

for (let i = 0; i < fileInput.files.length; i++) {
    formData.append('files[]', fileInput.files[i], fileInput.files[i].name);
}

let xhr = new XMLHttpRequest();
xhr.open('POST', '../upload.php', true);
xhr.send(formData);

В upload.php я просто делаю

<code>echo "<pre>";
print_r($_FILES['files']);
echo "

";

, и он показывает этот видошибки файла, если файл 1 МБ или больше

Array
{
  [name] => Array
    (
        [0] => image.jpg
    )

  [type] => Array
    (
        [0] => 
    )

  [tmp_name] => Array
    (
        [0] => 
    )

  [error] => Array
    (
        [0] => 3
    )

  [size] => Array
    (
        [0] => 0
    )

)

Answer 1

При событии нажатия кнопки получить тип входного файла проп с использованием идентификатора и сделать данные формы

// On button click event
    $('#upload').on('click', function() {
        var file_data = $('#fileToUpload').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', file_data);
        $.ajax({
            url: 'server_file.php',
            dataType: 'json', 
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
            beforeSend: function (){
                // ...
            },
            success: function(response){
                console.log(response);
            },
            error: function(response){
                var response = response.responseJSON;
                console.log(response);
            }
        });
    });

А на сервере:

echo "<pre>";

print_r($_FILES);

Answer 2

Это для фреймворка laravel, но ajax-запрос везде одинаков, я просто хотел показать вам, что, как только вы включите enctype="mulitpart/form-data" в тег формы.И затем вы использовали массив как скобки.как файл name="file[]", тогда больше ничего не делайте, я хочу сказать, что он дает вам все файлы с индексами массива.И в этом случае я не сталкиваюсь с ошибкой максимального размера файла и т. Д. Это только для вашей помощи.

$(document).on('click','#hide_btn', function(e){
        e.preventDefault();

        var formData = new FormData(this.form);

        //$.ajaxSetup({
        //    headers: {
        //        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        //    }
        //});

        $.ajax({
            method: 'POST',
            url: '{{ route("visa.store") }}',
            cache: false,
            contentType: false,
            processData: false,
            data: formData,

            success: function(data){
                console.log(data);
            },

            error: function(data){
                console.log(data);
            }
        });
    });

Answer 3

ваша HTML-форма

            <form  name="fileInfoForm" class="form-horizontal" id='fileInfoForm' 
            method="post"  enctype="multipart/form-data">
            <input type="file"   id='file'   name='file' model="ctrl.fileInfo.file"
             placeholder='Choose file'   />
            </form>

И ваш ajax-код здесь для отправки более 15 МБ файла в php скрипт

<script>
    $('#form').submit(function (e) {
        e.preventDefault();     
        var file=$("#file").val().split("\\").pop();
        var form=document.getElementById('fileInfoForm');
        var fd=new FormData(form);
        fd.append('file',file);
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',

            url: 'your_file.php',
            data: fd,
            dataType: "json",
            processData: false,
            contentType: false,
            cache: false,
            success: function (data) {
            }


        })
    });
</script>