Caricamento di file Ajax con PHP e jQuery

Stai cercando un caricamento di file utilizzando Ajax in PHP? Il caricamento di un file tramite Ajax è una cosa di tendenza al giorno d’oggi. Aggiunge una migliore esperienza utente su un sito web. In questo articolo, ti mostro come caricare file tramite Ajax con PHP e jQuery.

Il caricamento di file/immagini è un’attività normale per gli sviluppatori. Esistono diversi casi in cui è necessario creare funzionalità di caricamento dei file. Alcuni degli esempi più comuni sono il caricamento di foto del profilo, immagini di slider, testimonianze, portfolio, caroselli, ecc.

Perché è necessario caricare i file utilizzando Ajax?

Il motivo principale per eseguire il caricamento di file tramite Ajax è che non si desidera aggiornare una pagina dopo il caricamento del file. Ed è ovvio. Non ha senso caricare un’intera pagina se non necessario. Se stai caricando una pagina dopo il caricamento del file, stai aggiungendo un carico extra su un server.

Il caricamento di file tramite Ajax riduce il carico non necessario su un server e offre una migliore esperienza utente sul sito web.

Quindi, senza ulteriori indugi, iniziamo con il codice.

Caricamento file utilizzando Ajax con PHP e jQuery

Iniziamo creando un modulo con un file di input e il pulsante di invio. Aggiungi il codice HTML sottostante nel tuo file, ad esempio index.php.

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

Mentre scriverò un po’ di codice JavaScript, ho aggiunto la classe ‘file’ e ‘submit’ rispettivamente all’input del file e al pulsante di invio. Queste classi fungono da identificatore per gli elementi del modulo.

Codice JavaScript

Quindi, scrivi del codice JavaScript che darà una chiamata Ajax a un lato server e gestirà la risposta.

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

Nel codice JavaScript sopra, sto inviando il contenuto del ajax.phpfile al file e gestendo anche la risposta.

Codice PHP

A questo punto, abbiamo finito di inviare il contenuto del file al lato server. Ora creiamo un file ajax.phpdove dobbiamo scrivere il codice PHP che carica i file su un 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();

Il codice PHP di cui sopra controlla prima la directory "uploads". Se questa directory non esiste, la crea e carica il file all’interno di questa cartella.

Spero che ora tu possa implementare facilmente il caricamento di file utilizzando Ajax sul tuo sito web. Mi piacerebbe sentire i tuoi pensieri nella sezione commenti qui sotto.

articoli Correlati

• Come caricare i post di WordPress con AJAX
• Come utilizzare il completamento automatico di jQuery con Ajax
• Trascina e rilascia il caricamento di file utilizzando JavaScript e PHP