Wysyłanie pliku poprzez Ajax :: 4programmers.net

lelek91

2020-06-28T17:08:57+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: nie wasz interes
Postów: 51

0

Witam, piszę pewna aplikację pod system CMS Joomla i mam następujący problem. Aplikacja musi mieć w pewnym miejscu przesyłanie plików.

Plik projekty.js (tutaj znajduje się funkcja która poprzez ajax ma przekazywać plik do obsłużenia w PHP). Wykonanie ajax ma się odbywać natychmiast po umieszczeniu pliku w input file.

Kopiuj

        //wysyłanie pliku
        $('table.materials').on('change', 'input[type=file]', function(){

            const formData = new FormData();
            formData.append('file', this.files[0]);

            $.post(
                'index.php',
                {
                    option: 'com_projekty',
                    task: 'project.placeFile',
                    format: 'json',
                    file: formData,
                    tmpl: 'raw'
                },
                'json'
            ).done((response) => {
                return response;
            });

        })

Plik PHP do obsługi pliku

Kopiuj

    function placeFile() {

        echo "Test";
        var_dump($_FILES);

    }

Konsola javascript po dodaniu pliku w input text zwraca mi następujący błąd:

Kopiuj

jquery-3.4.1.min.js:2 Uncaught TypeError: Illegal invocation
    at i (jquery-3.4.1.min.js:2)
    at qt (jquery-3.4.1.min.js:2)
    at qt (jquery-3.4.1.min.js:2)
    at Function.k.param (jquery-3.4.1.min.js:2)
    at Function.ajax (jquery-3.4.1.min.js:2)
    at Function.k.<computed> [as post] (jquery-3.4.1.min.js:2)
    at HTMLInputElement.<anonymous> (projekty.js:741)
    at HTMLTableElement.dispatch (jquery-3.4.1.min.js:2)
    at HTMLTableElement.v.handle (jquery-3.4.1.min.js:2)

Czy mógłby ktoś dać jakieś wskazówki, ewentualnie rozwiązanie w jaki sposób powinienem przekazać plik do funkcji placeFile() w PHP?

urke

2020-06-28T17:37:56+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 360

2

https://api.jquery.com/jquery.ajax/

processData (default: true)
Type: Boolean
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

Ogólnie sprawdź, czy masz poprawnie zdefiniowane właściwości w tym poście ajaxowym, wieki już nie używałem.

lelek91

2020-06-28T21:35:02+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: nie wasz interes
Postów: 51

0

Udało mi się w ten sposób przetworzyć zapytanie Ajax jednak zmienna $_FILES zwraca pustą tablicę.

Kopiuj

$.ajax({
                type: 'post',
                url: 'index.php?option=com_projekty&task=project.placeFile&format=json&tmpl=raw',
                processData: false,
                data: {
                    'file': formData
                }
            })

jurek1980

2020-06-28T21:44:39+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 3581

1

A co masz w formData przed wysłaniem formularza?

urke

2020-06-28T21:47:29+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 360

0

W pierwszym poście deklarujesz formData jako const. To chyba w następnej linijce append nie powinno zadziałać?

Nie. Const daje tylko to że nie można podmienić wartości/referencji zmiennej. Ale jak zmienna jest tablicą czy obiektem, to bez problemu można zmieniać zawartość.
Dlatego sporo osób nie lubi jsowego consta, bo ludzie spodziewają się czytając kod niemutowalności jak nie wiedzą co się naprawdę dzieje.

lelek91

2020-06-30T23:03:08+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: nie wasz interes
Postów: 51

0

Wspomogłem się jeszcze YouTube'em. Takie rozwiązanie pomogło. Pozdrawiam i dziękuję za pomoc.

Kopiuj

            const formData = new FormData();
            const files = this.files[0];
            formData.append('file', files);

            $.ajax({
                url: 'index.php?option=com_projekty&task=project.placeFile&format=json&tmpl=raw',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    console.log(response);
                }
            })