Skocz do zawartości

JS - Optymalizacja uploadu obrazków


Rekomendowane odpowiedzi

Dobry wieczór forumowicze :)

 

Przychodzę do Was z drobną zagwozdką która trapi mnie już od paru dobrych dni i nie potrafię znaleźć na to satysfakcjonującej mnie odpowiedzi.

Otóż mam swój własny autorski upload plików napisany w JavaScript z wykorzystaniem jQuery oraz obiektu FileReader (na potrzeby wydobycia miniaturek i pokazanie ich userowi).

 

No i ogółem wszystko działa - jest uploadowanie z możliwością wielokrotnych plików, każdy z nich ma preview itp.. tyle że FileReader zwraca mi wszystkie te obrazki w formacie Base64.

 

Ogółem to taki miałem zamierzony właśnie efekt bo bez Base64 nie da się wydobyć miniaturki uploadowanego obrazka itp.. tylko teraz mnie zastanawia kwestia - czy to jest optymalne rozwiązanie żeby tego Base64 przesyłać ajaxowo postem do pliku PHP będącego akceptorem zdjęć i uploaderem ich do odpowiednich folderów / tworzenia im specyficznych linków?

 

Bo przykładowo - 1 zdjęcie jeszcze przejdzie, ale co jeżeli użytkownik zuploaduje np. 12 czy tam 15 zdjęć? Wtedy każde z nich pójdzie POST'em w formacie Base64 a to chyba nie jest do końca optymalne? (Albo tak ma być tylko ja o tym nie wiem?).

 

Base64 ma zazwyczaj ileś tam tysięcy znaków, jakby tak przemnożyć te X zuploadowanych obrazków w momencie przez liczbę znaków w ciągu Base64 to...chyba dramat? :)

 

Dlatego przychodzę do Was z pytaniem - czy istnieje może jakiś inny sposób na to aby tego Base64 w jakiś sposób skrócić albo przekonwertować do innego bardziej optymalnego ciągu zawierającego mniejszą ilość znaków? Czy zostawić to tak jak jest w chwili obecnej i wysyłać postem te base64?

Tutaj fragment uploadu skryptu:

 

var add_photography_btn = $(".upload-photography-btn");
var photos_uploading = $("#add-photo-upload");
var array_of_urls = [];
var img_gallery = $(".image-gallery-new");

photos_uploading.on("change", function(){

    var files = photos_uploading[0].files;  // get files from input  
    var count_photos = files.length;    // count how many photos uploaded
    var src_results;
    var arrayofurl = [];
    var base_64_results;

    for(var x = 0; x < count_photos; x++)
    {
        var fileReader = new FileReader();  // fileReader object
        var uploaded_photos = files.item(x);

        // var url = URL.createObjectURL(uploaded_photos);
        // console.log(url);

        src_results = fileReader.readAsDataURL(uploaded_photos);

        fileReader.onload = function() {
            console.log("Plik");
        }

        fileReader.onloadstart = function() {
            console.log("START");
        }

        fileReader.onprogress = function() {
            console.log("Trwa wczytywanie pliku...");
        }

        fileReader.onloadend = function(e) {
            console.log("Zakończono wczytywanie!");
            base_64_results = e.target.result;
            $("#previewImg").attr("src", base_64_results);
            array_of_urls.push(base_64_results);
            img_gallery.append(`<div class="image-preview-container"><img src="${base_64_results}" class="image-preview"></div>`)
        }
    }
});

 

Odnośnik do komentarza
Udostępnij na innych stronach

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij

  • Ostatnio przeglądający forum JS   0 użytkowników
    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...