BootstrapVallidation качване на снимки (multiple)

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1600
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 165
Location: Parse error: unexpected "}" in /home/index.php on line 26

Re: BootstrapVallidation качване на снимки (multiple)

Post by anonimen » Wed Apr 01, 2020 8:12 am

Ticketa wrote:
Wed Apr 01, 2020 6:53 am
Revelation wrote:
Tue Mar 31, 2020 6:02 pm
Еми логично е. При качване една по една, това е заявка за заявка. JavaScript ще ти ограничи броя само, когато са накуп, защото тогава са много файлове - една заявка.
В такъв случай значи няма да мога да ги проверявам(?) , кофти, не се бях замислил
E защо - просто си пазиш в една променлива колко файла си пратил до сървъра към момента и премахваш полето, като надвишат 10?

uphero
Потребител
Потребител
Posts: 773
Joined: Mon Feb 20, 2012 12:26 pm
Answers: 32
Location: Казанлък
Contact:

Re: BootstrapVallidation качване на снимки (multiple)

Post by uphero » Wed Apr 01, 2020 3:36 pm

Е вземай броя вече качените

User avatar
Revelation
Web-tourist
Web-tourist
Posts: 899
Joined: Sun Mar 24, 2013 1:23 pm
Answers: 63

Re: BootstrapVallidation качване на снимки (multiple)

Post by Revelation » Wed Apr 01, 2020 3:38 pm

Ако идеята ти е да ограничиш общия брой файлове за качване за потребител, то тази проверка става на backend-а и просто отказваш всяка нова заявка за качване, ако общия брой е надвишен.
Ако искаш просто да ограничиш броя файлове накуп, то тогава това няма какво да те притеснява, защото ти де факто ограничаваш броя накуп.
Ако потрбителя качва файловете един по един, не виждам защо трябва да броиш нещо от клиентска гледна точка.

Ако имаш общ лимит от страна на сървъра, дори и да качва файл по файл, в един момент сървъра просто ще го отреже.

Ако искаш да направиш това с цел ограничение на заявките към сървъра, то те уверявам, че си губиш времето с безсмислени неща.

User avatar
Ticketa
Турист
Турист
Posts: 571
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 24
Location: in /root
Contact:

Re: BootstrapVallidation качване на снимки (multiple)

Post by Ticketa » Wed Apr 01, 2020 3:59 pm

Revelation wrote:
Wed Apr 01, 2020 3:38 pm
Ако идеята ти е да ограничиш общия брой файлове за качване за потребител, то тази проверка става на backend-а и просто отказваш всяка нова заявка за качване, ако общия брой е надвишен.
Ако искаш просто да ограничиш броя файлове накуп, то тогава това няма какво да те притеснява, защото ти де факто ограничаваш броя накуп.
Ако потрбителя качва файловете един по един, не виждам защо трябва да броиш нещо от клиентска гледна точка.

Ако имаш общ лимит от страна на сървъра, дори и да качва файл по файл, в един момент сървъра просто ще го отреже.

Ако искаш да направиш това с цел ограничение на заявките към сървъра, то те уверявам, че си губиш времето с безсмислени неща.
Бекенда проверява общия брой на изпратени файлове, проверява и неговите формати (jpg png) , просто целта ми е при опит за прикачване на файловете (без значение накуп или един по един) да се визуализира предупреждение: Имате възможност да прикачите максимум 10 снимки съответстващи на формати: jpg png

User avatar
Revelation
Web-tourist
Web-tourist
Posts: 899
Joined: Sun Mar 24, 2013 1:23 pm
Answers: 63

Re: BootstrapVallidation качване на снимки (multiple)

Post by Revelation » Wed Apr 01, 2020 4:20 pm

Ами от сървърна гледна точка, щом имаш лимит от 10 (като цяло), то тогава не проверявай само колко са изпратени накуп.
След като получиш заявка за качване, сравняваш с базата данни (или както ги записваш нещата) и ако дадения потребител е надвишил лимита си просто връщаш грешка, с описание защо заявката е прекъсната.

От клиентска гледна точка трябва да можеш да правиш следното:
  • Да абсорбираш адекватно грешки върнати от сървъра, напр. надвишаване на лимит
  • Можеш да предотвратиш броя накуп
  • Можеш да валидираш разширения и прочие
От сървърна гледна точка:
  • Трябва да обхваща всеки use case, който е в обхвата на приложението ти. В твоя случай:
    • Валидация дали потребителя е надвишил лимита си (това може да включва за определен период или като цяло, или както ти решиш)
    • Ако лимита не е надвишен - валидация за общия брой изпратени файлове. В този случай можеш или да обработиш само част или да върнеш грешка, че броя файлове наведнъж е надвишен.
    • Валидация по общ размер на заявката (общия размер на всички изпратени файлове)
    • Валидация за име на файла
    • Валидация по разширение
    • и т.н.
Ако приложението е SPA (Single Page Application), то тогава ако искаш си сложи брояч и на клиента. Тогава само при рефреш ще губиш общия брой файлове, които са качени до сега, но знаеш, че си имаш валидацията от сървъра, която трябва да можеш абсорбираш адекватно на клиента.
Няма смисъл да записваш брой в бисквитки, local/session storage и т.н. Безсмислено е, защото всеки може да ги достъпи.

User avatar
Ticketa
Турист
Турист
Posts: 571
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 24
Location: in /root
Contact:

Re: BootstrapVallidation качване на снимки (multiple)

Post by Ticketa » Thu Apr 02, 2020 1:57 pm

Скаран съм с JavaScript;
В момента имам "напредък" чрез

Code: Select all

if (num > 10) {
ги изброявам файловете и когато ги надвишава изкарва съобщение
You can only upload a maximum of 10 files
Обаче хипотетично, ако някоя снимка е объркана или не ти харесва от тези 10 прикачени вече ти можеш да е премахнеш и да добавиш нова .... нооо скрипта не го позволява защото брояча num() вече е изброил 10те първи и не е приспаднал премахната и тя се пада като 11та

Не съм сигурен дали напълно ме разбрахте :D прикачвам демо https://jsfiddle.net/uqwzL34p/


Обмислях вариант при

Code: Select all

    $(document).on('click', '.image-cancel', function() {
        let no = $(this).data('no');
        $(".preview-image.preview-show-"+no).remove();
    });
Да вкарам променливата num-1 и да приспада с 1 число на долу, но до колко това е правилно? (като при този начин пък... се получава дублиране на числа, например:
saveimage.png

https://jsfiddle.net/g2huzyqx/

Code: Select all

<script type="text/javascript">
var num = 4;
	$(document).ready(function() {
    document.getElementById('pro-image').addEventListener('change', readImage, false);
    
    $( ".preview-images-zone" ).sortable();
    
    $(document).on('click', '.image-cancel', function() {
        let no = $(this).data('no');
        num = num - 1;
        $(".preview-image.preview-show-"+no).remove();
    });
});

function readImage() {
    if (window.File && window.FileList && window.FileReader) {
        var files = event.target.files; //FileList object
        var output = $(".preview-images-zone");

        for (let i = 0; i < files.length; i++) {
            //alert(num);
            if (num > 10) {
                alert("You can only upload a maximum of 10 files");
            } else {
            var file = files[i];
            if (!file.type.match('image')) continue;
            
            var picReader = new FileReader();
            
            picReader.addEventListener('load', function (event) {
                var picFile = event.target;
                var html =  '<div class="preview-image preview-show-' + num + '">' +
                            '<div class="image-cancel" data-no="' + num + '">x</div>' +
                            '<div class="image-zone"><img id="pro-img-' + num + '" src="' + picFile.result + '"></div>' +
                            '<div class="tools-edit-image"><a href="javascript:void(0)" data-no="' + num + '" class="btn btn-light btn-edit-image">edit</a></div>' +
                            '</div>';

                output.append(html);
                num = num + 1;
            });

            picReader.readAsDataURL(file);
            }
        }
        $("#pro-image").val('');
    } else {
        console.log('Browser not support');
    }
}

	</script>
You do not have the required permissions to view the files attached to this post.

User avatar
Revelation
Web-tourist
Web-tourist
Posts: 899
Joined: Sun Mar 24, 2013 1:23 pm
Answers: 63

Re: BootstrapVallidation качване на снимки (multiple)

Post by Revelation » Thu Apr 02, 2020 10:58 pm

Кога става точно комуникацията със сървъра?

User avatar
Ticketa
Турист
Турист
Posts: 571
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 24
Location: in /root
Contact:

Re: BootstrapVallidation качване на снимки (multiple)

Post by Ticketa » Fri Apr 03, 2020 7:00 am

Revelation wrote:
Thu Apr 02, 2020 10:58 pm
Кога става точно комуникацията със сървъра?
След натискане на бутон "submit", тогава се изпращат данните

User avatar
Revelation
Web-tourist
Web-tourist
Posts: 899
Joined: Sun Mar 24, 2013 1:23 pm
Answers: 63

Re: BootstrapVallidation качване на снимки (multiple)

Post by Revelation » Fri Apr 03, 2020 4:01 pm

Втория примерен код, изглежда да работи нормално, и да щом заявката я изпращаш накрая, можеш да си използваш брояч по този начин.

По принцип не е хубаво да използваш глобални променливи. Можеш да оплетеш нещата доста хубаво и накрая ще се чудиш от къде ти е дошло.

За да се увериш, че броиш правилно можеш да направиш следното:

Вариант 1: Слагаш идентификатор на контейнера, който държи контейнерите с картинките и при onChange винаги взимаш този контейнер и следиш колко директни елемента има този контейнер.

Вариант 2: Слагаш еднакъв идентификатор на всички контейнери с картинките(някакъв class) и след това ги взимаш като лист, на който можеш да използваш length свойството, за да вземеш броя елементи.
С този вариант можеш да сложиш click събитието на класа и при премахване не ти трябва да знаеш номера, а вместо това да използваш $(this).remove().

User avatar
xlebabarov
Нов
Нов
Posts: 186
Joined: Tue Nov 10, 2009 6:24 am

Re: BootstrapVallidation качване на снимки (multiple)

Post by xlebabarov » Mon Jun 29, 2020 12:38 am

В крайна сметка как го направи че и на мен ми стана любопитно?
Гошо пича ;) Понякога питам въпросчета с повишена трудност, но какво да се прави :)

Post Reply