Przeciągnij i upuść przesyłanie plików za pomocą JavaScript i PHP

Czy chcesz zintegrować funkcję przesyłania plików metodą „przeciągnij i upuść” w swojej witrynie? Ta funkcja jest przyjazna dla użytkownika i zmniejsza liczbę kliknięć użytkowników. W tym artykule dowiemy się, jak dodać funkcję przesyłania plików metodą „przeciągnij i upuść” za pomocą JavaScript i PHP. Będziesz mieć również dane wejściowe do przeglądania pliku.

Ostateczny interfejs użytkownika przesyłania plików będzie wyglądał jak na poniższym obrazku.

Dlaczego potrzebujesz funkcji przeciągania i upuszczania plików?

Zawsze chcemy mieć lepsze wrażenia użytkownika na stronie. Udostępnianie funkcji przeciągania i upuszczania w celu przesyłania plików jest łatwą w użyciu opcją dla użytkowników. Wiele popularnych stron internetowych, takich jak Facebook, WordPress już korzysta z tej funkcji.

Ta funkcja wygląda lepiej w porównaniu z tradycyjnym sposobem przesyłania plików. Poprawia również wygodę użytkownika, ponieważ użytkownik po prostu przeciąga plik i przesyła go na serwer.

W tym samouczku udostępnimy użytkownikom obie opcje. Plik można przesłać za pomocą metody „przeciągnij i upuść” lub poprzez wejście pliku.

Zamierzam użyć Ajax do przesyłania plików po stronie serwera. Używając Ajax, twoja strona nie zostanie załadowana. Po prostu wysyła plik do serwera w tle.

Zintegruj narzędzie do przesyłania plików „przeciągnij i upuść”

Na początek napiszmy najpierw kod HTML. Poniższy kod HTML będzie zawierał kontener do przesyłania plików. Zawiera również plik CSS i JS, który stworzę w kolejnych krokach.

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

W powyższym kodzie HTML wykorzystałem 2 zdarzenia – ondrop i onclick. Ich metody zdefiniuję w custom.jspliku. Wcześniej dodajmy kod CSS w style.csspliku.

#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;
}

Naszym celem jest to, że gdy użytkownik upuszcza lub przegląda plik, plik powinien zostać przesłany na serwer. W tym celu musisz napisać kod JavaScript, który pobiera plik po stronie klienta i wysyła go na serwer.

Aby obsłużyć ten przepływ, dodaj poniższy kod do custom.jspliku.

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('');
            }
        });
    }
}

Napisany powyżej kod JavaScript automatycznie wykrywa opcje wybrane przez użytkownika do przesłania pliku. Na koniec funkcja ajax_file_upload()pobiera obiekt pliku i przekazuje go do pliku Ajax.

Prześlij plik na serwer

W pliku Ajax napiszę rzeczywisty kod, który wgrywa plik na serwer. Utwórz plik o nazwie ajax.phpi dodaj do niego poniższy kod.

<?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.";

Ten kod PHP sprawdza najpierw, czy folder o nazwie „przesyłane” istnieje na serwerze. Jeśli nie, tworzy katalog „uploads” i przenosi do niego plik. Możesz dostosować tę ścieżkę katalogu zgodnie z wymaganiami.

Mam nadzieję, że rozumiesz, jak dodać przesyłanie plików metodą „przeciągnij i upuść” za pomocą PHP i JavaScript. Daj mi znać swoje przemyślenia i sugestie w poniższym komentarzu.

Powiązane artykuły

• Przeciągnij i upuść przesyłanie wielu plików za pomocą JavaScript i PHP
• Przesyłanie plików Ajax za pomocą PHP i jQuery
  – TinyPNG Kompresuj obrazy za pomocą PHP