Dra och släpp filöverföring med JavaScript och PHP

Senaste uppdateringen okt 17, 2021

Innehåll

Varför behöver du dra och släpp filöverföringsfunktion?

Vill du integrera dra och släpp-filöverföringsfunktionen på din webbplats? Den här funktionen är användarvänlig och minskar användarnas klick. I den här artikeln studerar vi hur du lägger till funktionalitet för att dra och släppa filöverföring med JavaScript och PHP. Du kommer också att ha filinmatning för att bläddra i en fil.

Det sista användargränssnittet för filöverföring ser ut som bilden nedan.

Varför behöver du dra och släpp filöverföringsfunktion?

Vi vill alltid ha en bättre användarupplevelse på webbplatsen. Att ge dra och släpp-funktionen för att ladda upp filer är ett lättanvänt alternativ för dina användare. Många populära webbplatser som Facebook, WordPress använder redan den här funktionen.

Denna funktion ser bättre ut jämfört med det traditionella sättet att ladda upp filer. Det förbättrar också användarupplevelsen eftersom användaren helt enkelt drar filen och laddar upp den på en server.

I denna handledning kommer vi att ge båda alternativen till användarna. Man kan ladda upp filen antingen med dra och släpp eller genom filinmatningen.

Jag ska använda Ajax för att ladda upp filer på serversidan. Om du använder Ajax laddas din sida inte. Den skickar helt enkelt filen till servern i bakgrunden.

Integrera Drag & Drop File Uploader

För att komma igång, låt oss först skriva HTML-koden. Följande HTML-kod kommer att ha en behållare för filöverföring. Den innehåller också en CSS- och JS-fil som jag skapar i nästa steg.

<link rel="stylesheet" href="style.css">
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
    <div id="drag_upload_file">
        <p>Drop file here</p>
        <p>or</p>
        <p><input type="button" value="Select File" onclick="file_explorer();"></p>
        <input type="file" id="selectfile">
    </div>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="custom.js"></script>

I ovanstående HTML använde jag de två händelserna – ondrop och onclick. Jag kommer att definiera deras metoder i custom.jsfilen. Innan det, låt oss lägga till CSS-koden i style.cssfilen.

#drop_file_zone {
    background-color: #EEE;
    border: #999 5px dashed;
    width: 290px;
    height: 200px;
    padding: 8px;
    font-size: 18px;
}
#drag_upload_file {
  width:50%;
  margin:0 auto;
}
#drag_upload_file p {
  text-align: center;
}
#drag_upload_file #selectfile {
  display: none;
}

Vårt mål är att när en användare tappar eller bläddrar i en fil ska filen laddas upp till servern. För detta måste du skriva JavaScript-kod som tar en fil från klientsidan och skickar den till servern.

För att hantera detta flöde, lägg till koden nedan i custom.jsfilen.

var fileobj;
function upload_file(e) {
    e.preventDefault();
    fileobj = e.dataTransfer.files[0];
    ajax_file_upload(fileobj);
}
 
function file_explorer() {
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() {
        fileobj = document.getElementById('selectfile').files[0];
        ajax_file_upload(fileobj);
    };
}
 
function ajax_file_upload(file_obj) {
    if(file_obj != undefined) {
        var form_data = new FormData();                  
        form_data.append('file', file_obj);
        $.ajax({
            type: 'POST',
            url: 'ajax.php',
            contentType: false,
            processData: false,
            data: form_data,
            success:function(response) {
                alert(response);
                $('#selectfile').val('');
            }
        });
    }
}

JavaScript-koden skriven ovan upptäcker automatiskt de alternativ som användaren valt för att ladda upp en fil. Slutligen ajax_file_upload()tar funktionen filobjektet och skickar det till Ajax-filen.

Ladda upp fil på servern

I Ajax-filen skriver jag den faktiska koden som laddar upp filen på servern. Skapa en fil som heter ajax.phpoch lägg till koden nedan i den.

<?php
$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
 
if (!(in_array($_FILES['file']['type'], $arr_file_types))) {
    echo "false";
    return;
}
 
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
 
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. time(). '_'. $_FILES['file']['name']);
 
echo "File uploaded successfully.";

Denna PHP-kod kontrollerar först om mappen som heter "uppladdningar" finns på en server. Om inte, skapar den en katalog med "uppladdningar" och flyttar filen inuti den. Du kan justera den här katalogvägen enligt dina krav.

Jag hoppas att du förstår hur du lägger till dra-och-släpp-filöverföring med PHP och JavaScript. Låt mig veta dina tankar och förslag i kommentaren nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net