Przesyłanie plików Ajax za pomocą PHP i jQuery

Szukasz wgrywania plików za pomocą Ajax w PHP? Przesyłanie pliku przez Ajax jest obecnie modne. Zapewnia lepsze wrażenia użytkownika na stronie internetowej. W tym artykule pokażę, jak przesyłać pliki przez Ajax z PHP i jQuery.

Przesyłanie plików/obrazów to regularne zadanie programistów. Istnieje kilka przypadków, w których musisz zbudować funkcję przesyłania plików. Niektóre z typowych przykładów to przesyłanie zdjęć profilowych, obrazów suwaków, referencji, portfolio, karuzeli itp.

Dlaczego potrzebne jest przesyłanie plików za pomocą Ajax?

Głównym powodem wykonywania przesyłania plików przez Ajax jest to, że nie chcesz odświeżać strony po przesłaniu pliku. I to jest oczywiste. Nie ma sensu ładowanie całej strony, jeśli nie jest to konieczne. Jeśli ładujesz stronę po przesłaniu pliku, dodajesz dodatkowe obciążenie na serwerze.

Przesyłanie plików za pomocą Ajax zmniejsza niepotrzebne obciążenie serwera i zapewnia lepsze wrażenia użytkownika na stronie internetowej.

Więc bez dalszej zwłoki zacznijmy od kodu.

Przesyłanie plików za pomocą Ajax z PHP i jQuery

Zacznijmy od utworzenia formularza, który zawiera plik wejściowy i przycisk przesyłania. Dodaj poniższy kod HTML do pliku, powiedzmy index.php.

<form>
    <p><input type="file" name="file" class="file" required></p>
    <input type="submit" name="submit" class="submit" value="Submit">
</form>

Ponieważ mam zamiar napisać trochę kodu JavaScript, dodałem odpowiednio klasę „file" i „submit” do wejścia pliku i przycisku przesyłania. Te klasy działają jako identyfikatory dla elementów formularza.

Kod JavaScript

Następnie napisz trochę kodu JavaScript, który da wywołanie Ajax po stronie serwera i obsłuży odpowiedź.

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
    $(function() {
        $('.submit').on('click', function() {
            var file_data = $('.file').prop('files')[0];
            if(file_data != undefined) {
                var form_data = new FormData();                  
                form_data.append('file', file_data);
                $.ajax({
                    type: 'POST',
                    url: 'ajax.php',
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success:function(response) {
                        if(response == 'success') {
                            alert('File uploaded successfully.');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
  
                        $('.file').val('');
                    }
                });
            }
            return false;
        });
    });
</script>

W powyższym kodzie JavaScript wysyłam zawartość pliku do ajax.phppliku oraz obsługę odpowiedzi.

Kod PHP

Na tym etapie kończymy wysyłanie zawartości pliku po stronie serwera. Teraz utwórz plik, w ajax.phpktórym musimy napisać kod PHP, który przesyła pliki na serwer.

ajax.php

<?php
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
  
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. $_FILES['file']['name']);
  
echo "success";
die();

Powyższy kod PHP najpierw sprawdza katalog ‘uploads’. Jeśli ten katalog nie istnieje, tworzy go i przesyła plik do tego folderu.

Mam nadzieję, że możesz teraz łatwo zaimplementować przesyłanie plików za pomocą Ajax na swojej stronie internetowej. Chciałbym usłyszeć twoje przemyślenia w sekcji komentarzy poniżej.

Powiązane artykuły

• Jak załadować post WordPress za pomocą AJAX
• Jak korzystać z autouzupełniania jQuery z Ajax
• Przeciągnij i upuść przesyłanie plików za pomocą JavaScript i PHP