Problema de JS nu inlocuieste atributul SRC

Limbaje de Programare JavaScript / Node
1

Problema codului este ca nu inlocuieste atributul src din parseHTML !

	$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<div class="image radius has-image" ng-repeat="picture in Pictures" style=""><div class="picture loader-inline"><img ng-show="picture.Id > 1" ng-src="" src=""><span class="fa fa-circle-o-notch maincolor" style="display:none;"></span></div><div class="action"><span class="fa fa-rotate-left ng-scope" ng-if="picture.Blocked === false || picture.Blocked == null" ng-click="rotateToLeft(picture)"></span><span class="fa fa-trash ng-scope" ng-if="picture.Blocked === false || picture.Blocked == null" ng-click="deletePicture(picture)"></span><span class="fa fa-rotate-right ng-scope" ng-if="picture.Blocked === false || picture.Blocked == null" ng-click="rotateToRight(picture)"></span></div></div>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

Ma poate ajuta cineva cu un sfat ?

Codul normal era parseHTML(’<img’) si am adaugat eu acel div etc

2

Văd că folosești Angular. Nu sunt sigur de ce nu se înlocuiește “src”, dar la prima vedere nu mi se pare ok cum adaugi elemente Angular în DOM.

Nu poți pune markup-ul Angular în HTML si să adaugi imaginile în Pictures?

3

Codul e pentru un upload multiplu de poze…si imi trebuie ca poza uploadata thumb la ea sa il afiseze in codul html bagat in parseHTML :frowning: daca as lasa doar <img ar functiona :frowning:

4

am inlocuit cu <img

si merge

5

Imi pozitioneaza automat in primul div SRC ( eu vreau in IMG sa-l bage nu in DIV :frowning:

6

Template-ul de Angular nu e HTML, trebuie compilat de angular. Presupun că ai Angular.JS-ul vechi.

Poți face tot ce ai scris cu directive noi in Angular, nu cum ai făcut. Probabil ca găsești directivă de multiple file upload.

Practic iei fisierele cu o directiva ng-uploads/ceva ng-… și folosești array-ul de fișiere (de pe $scope in AngularJS) într-un ng-repeat în care setezi ng-src după numele fiecărui fișier.

Dacă nu vrei să atingi codul de angular atunci înlocuiești tot nodul unde vrei să înlocuiești și rendezi cu js ce ar randa angular, altfel trebuie sa chemi $compile din angular dupa fiecare iteratie de inlocuire de src și e super urât.

Src-ul ala nu e un singur src, sunt mai multe după ce randeaza angular și oricum ti-l rescrie dupa primul event.

3 Likes
7

Dacă folosești Angular (sau orice framework…) este recomandat să reduci interacțiunile cu DOM-ul și să folosești framework-ul pentru asta, nu să faci tu manipulările.

Când pui un exemplu de cod cu o problemă, încearcă să pui minimum de cod care îți generează probleme, nu un bloc întreg.

De exemplu, din cele 20 de linii, care îți generează probleme? Presupun că doar asta:

$($.parseHTML('<div class="image radius has-image" ng-repeat="picture in Pictures" style=""><div class="picture loader-inline"><img ng-show="picture.Id > 1" ng-src="" src=""><span class="fa fa-circle-o-notch maincolor" style="display:none;"></span></div><div class="action"><span class="fa fa-rotate-left ng-scope" ng-if="picture.Blocked === false || picture.Blocked == null" ng-click="rotateToLeft(picture)"></span><span class="fa fa-trash ng-scope" ng-if="picture.Blocked === false || picture.Blocked == null" ng-click="deletePicture(picture)"></span><span class="fa fa-rotate-right ng-scope" ng-if="picture.Blocked === false || picture.Blocked == null" ng-click="rotateToRight(picture)"></span></div></div>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);

Aici ai cod care poate fi șters? Toate clasele, id-urile, atributele goale și fa-*. Și tag-urile goale, evident. Și rămânem cu asta:

$.parseHTML('<div ng-repeat="picture in Pictures"><div><img ng-show="picture.Id > 1"></div</div>')
.attr('src', event.target.result)
.appendTo(placeToInsertImagePreview);

Ceea ce este mult mai ușor de urmărit și, mai important, este că tu vrei să setezi attr('src') pe container, NU pe imagine.

7 Likes
8

Mama mia ce spaghetti ai aici.

Păi ori folosim un framework js ca să manipuleze dom-ul cu funcțiile lui ori folosim jquery și aia e.

Amesteci lucrurile și concepte fără nici o treabă unul cu altul.

Nu știu angular dar refuz să cred că nu știe manipula niște atribute direct.

2 Likes
9

Salut, desi lucrez in php,html de peste 10 ani…
Nu am citit niciodata o carte despre asta, am invatat doar editand din coduri vechi si in final am invatat ce face fiecare cod si etc… nu stiu in termeni angular, interactiuni cu DOM…imi cer scuze, e greseala mea ca am postat aici, unde oamenii sunt mult mai priceputi si poate nu inteleg exact ce vreau eu sa fac…

Dupa cum spuneam citind acum despre angular, am vazut ca in el se foloseste ng-show (ca exemplu) eu am elimiant acele criterii ca eu nu folosesc angular, ci doar un js vechi pe un PDO pentru upload poze si afisarea lor thumb inainte de a da salvare.

str='<div class="image radius has-image"><div class="picture loader-inline"><img src=""></div></div>',
                    $($.parseHTML( str )).attr('src', event.target.result).appendTo(placeToInsertImagePreview);

practic am nevoie de tot acel div si class pentru ca poza sa fie afisata corect in html… ca design…
si as vrea ca acel src sa nu mai fie introdus in primul div nici in al2-lea tocmai in a3a unde este IMG…

Inca odata imi cer scuze si daca nu ma pot face inteles va rog nu ma mai luati in seama, daca imi mai spuneti problema in termeni habar nu o sa am si va raciti gura degeba cu mine…
Pe viitor o sa ma docmuntez mai mult, dar la nivelul de a face doar site-uri pentru mine stiu ce imi trebuie si nu am fost interesat sa invat mult mai mult…

10

Mi-am dat seama intr-un final ca pot adauga doar <img class="image radius has-image"/> si sa imi afiseze corect. <3 este exact ce voiam …multumesc tuturor si promti sa invat pe viitor :smiley:

1 Like
11

Nu trebuie să-ți ceri scuze sau să eviți întrebările; toți suntem aici să învățăm lucruri :slight_smile:

Este important să înțelegi problema și să înțelegi rezolvarea. De cele mai multe ori, o expunere detaliată a problemei te ajută să o înțelegi (mai bine).

1 Like