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

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

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

Post by Ticketa » Mon Mar 30, 2020 6:03 pm

Привет, някой можели да удари рамо за JavaScript валидиране при качване на снимки.


използвам BootstrapVallidation за валидиране на снимки и след това ги проверям и чрез php - с цел да няма манипулиране.

Обаче към момента не мога да огранича броя снимки чрез javascript.

Искам да бъдат максимум 10
html;
<input id="ID-img" name="img[]" type="file" multiple="multiple">

Code: Select all


                        img: {

                            validators: {

                                file: {

                                    extension: 'jpeg,jpg,png,gif',

                                    type: 'image/jpeg,image/png,image/gif',

                                    message: 'Моля изберете файл до 5 мб с разширение: gif, jpeg, jpg, png!'

                                }

                            }

                        },

Пробвах да добавя
maxFiles: 10,

Обаче не работи :shock:

User avatar
djman
Гуру
Гуру
Posts: 2796
Joined: Sat Sep 12, 2009 8:07 am
Answers: 107

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

Post by djman » Mon Mar 30, 2020 7:43 pm

Не можах да намеря коя точно библиотека ползваш (като че ли има 2 или повече с това име).
Няма ли възможност да се добави custom валидатор с който да провериш колко файла има полето?

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

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

Post by Ticketa » Mon Mar 30, 2020 8:27 pm

Code: Select all

/*!
 * BootstrapValidator (http://bootstrapvalidator.com)
 * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
 *
 * @version     v0.5.2, built on 2014-09-25 4:01:07 PM
 * @author      https://twitter.com/nghuuphuoc
 * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
 * @license     MIT
 */
Иначе за къстъм решение и мен ми мина през ума, защото в самия валидатор не открих функция, която да позволява проверка на броя файлове

Това, което видях като "атрибути" (ако така е правилно да се казва)

Code: Select all

        html5Attributes: {
            extension: 'extension',
            maxsize: 'maxSize',
            minsize: 'minSize',
            message: 'message',
            type: 'type'
        },

        /**
         * Validate upload file. Use HTML 5 API if the browser supports
         *
         * @param {BootstrapValidator} validator The validator plugin instance
         * @param {jQuery} $field Field element
         * @param {Object} options Can consist of the following keys:
         * - extension: The allowed extensions, separated by a comma
         * - maxSize: The maximum size in bytes
         * - minSize: the minimum size in bytes
         * - message: The invalid message
         * - type: The allowed MIME type, separated by a comma
         * @returns {Boolean}
         */

User avatar
djman
Гуру
Гуру
Posts: 2796
Joined: Sat Sep 12, 2009 8:07 am
Answers: 107

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

Post by djman » Mon Mar 30, 2020 8:53 pm

Май е това - https://github.com/alavers/bootstrapvalidator.
Гледам че е базирано на `formvalidation`. Там може да се добави custom ето така: https://formvalidation.io/guide/example ... -validator

Само вместо FormValidation.validators най-вероятно пишеш BootstrapValidator.validators.

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

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

Post by Ticketa » Tue Mar 31, 2020 2:58 pm

djman, пробвах различни начини , но не сработва.

Като цяла идеята ми е , снимката преди да мине през backend (php) да бъде проверена чрез javascript валидация, да се покаже като preview и първата снимка да става Main т.е. главна снимка.

Чрез php отново правя проверки и просто "игнорирам"/"спирам" качването на нередовна снимка - като в края съобщавам на потребителя:
Имате 9 качени снимки и 1 некачена, която не съвпада с нашите условия. - тук целта при php е колкото може да се избегнат пишман хакерите.

Въпроса е, как да го съчетая (custum javascript) с bootstrapvalidator ;

Това, което се опитвам да направя е да изглежда така: https://bootsnipp.com/snippets/2eNKz
Просто "филтрацията" да минава през boostrapvalidator(понеже минавам цялата <form></form> и да няма вземане от тук оттам кодове и да става мазало)

Ползвам boostrap 3

User avatar
deam0n
Web-tourist
Web-tourist
Posts: 3023
Joined: Sat Oct 01, 2005 4:33 pm
Answers: 204
Location: Шопландия
Contact:

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

Post by deam0n » Tue Mar 31, 2020 4:07 pm

Аз за качване на снимки ползвам https://www.dropzonejs.com/ . Много е удобно и има всякакви екстри :)

User avatar
djman
Гуру
Гуру
Posts: 2796
Joined: Sat Sep 12, 2009 8:07 am
Answers: 107

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

Post by djman » Tue Mar 31, 2020 4:09 pm

Аз разбрах какво искаш, направи функция по подобие на тази от първия линк, регистрирай я във валидатора (Registering custom validator) и я използвай както използваш extension и type.

Функцията приема самия input, от който можеш да вземеш това, което те интересува (тук има няколко варианта) - броя на избрани файлове. Виж примера със "strongPassword" валидатора.

Пробвай така. Ако не стане, напиши как точно пробваш (код), за да има откъде да започнем. :)

---
А, разбира се, че има много други варианти...

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

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

Post by Ticketa » Tue Mar 31, 2020 4:36 pm

Пробвам по този начин (https://s.bootsnipp.com/iframe/2eNKz) (за момента оставих на страна bootstrapvalidation-а тъй като не се получиха нещата)

Обаче функцията за проверка на общия брой работи само когато прикачвам "накуп" т.е. всички снимки. Обаче, ако си играя 1 по 1 , тогава всякаш функцията неработи и можеш да качиш и 20 снимки , но 1 по 1

Code: Select all

if (i > 10){ //не сработва
                alert("можеш да качиш максимум 10 файла.");
            } else {

Code: Select all

<script type="text/javascript">
	$(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');
        $(".preview-image.preview-show-"+no).remove();
    });
});

var num = 10;
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++) {
            if (i > 10){
                alert("можеш да качиш максимум 10 файла.");
            } 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>

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

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

Post by Revelation » Tue Mar 31, 2020 6:02 pm

Еми логично е. При качване една по една, това е заявка за заявка. JavaScript ще ти ограничи броя само, когато са накуп, защото тогава са много файлове - една заявка.

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

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

Post by Ticketa » Wed Apr 01, 2020 6:53 am

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

Post Reply