Ajax-filöverföring med PHP och jQuery

Letar du efter en filöverföring med Ajax i PHP? Att ladda upp en fil via Ajax är trendiga saker idag. Det ger en bättre användarupplevelse på en webbplats. I den här artikeln visar jag hur du laddar upp filer via Ajax med PHP och jQuery.

Ladda upp fil / bild är en vanlig uppgift för utvecklare. Det finns flera fall där du behöver bygga filöverföringsfunktionalitet. Några av de vanligaste exemplen är att ladda upp profilbilder, skjutreglage, vittnesmål, portföljer, karuseller etc.

Varför behöver du filöverföring med Ajax?

Den främsta anledningen till att du utför filöverföring via Ajax är att du inte vill uppdatera en sida efter filöverföring. Och det är uppenbart. Det går inte att ladda en hel sida om det inte behövs. Om du laddar en sida efter filöverföring lägger du till extra belastning på en server.

Filöverföring med Ajax minskar onödig belastning på en server och ger en bättre användarupplevelse på webbplatsen.

Så utan ytterligare dröjsmål, låt oss börja med koden.

Filöverföring med Ajax med PHP och jQuery

Låt oss börja med att skapa ett formulär som har en filinmatning och skicka-knappen. Lägg till nedanstående HTML-kod i din fil säg index.php.

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

Eftersom jag ska skriva lite JavaScript-kod, lade jag till klassen ‘fil’ och ‘skicka’ till filinmatning respektive skicka-knappen. Dessa klasser fungerar som en identifierare för formelement.

JavaScript-kod

Skriv sedan lite JavaScript-kod som ger ett Ajax-samtal till en serversida och hanterar svaret.

<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>

I JavaScript-koden ovan skickar jag filinnehåll till ajax.phpfilen och hanterar också svaret.

PHP-kod

I det här skedet är vi klara med att skicka filinnehållet till serversidan. Skapa nu en fil ajax.phpdär vi måste skriva PHP-koden som laddar upp filer på en server.

ajax.php

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

Ovanstående PHP-kod söker först efter ‘uppladdningar’ -katalog. Om den här katalogen inte finns skapar den den och laddar upp filen i den här mappen.

Jag hoppas att du nu enkelt kan implementera filöverföring med Ajax på din webbplats. Jag skulle vilja höra dina tankar i kommentarfältet nedan.

relaterade artiklar

• Hur man laddar WordPress-inlägg med AJAX
• Hur man använder jQuery Autocomplete med Ajax
• Dra och släpp filöverföring med JavaScript och PHP