Autor Zpráva
Ecrazit
Profil *
#1 · Zasláno: 4. 4. 2012, 22:11:20
Odpovědět Citovat
Zdravím, vytvářím v PHP systém pro vkládání více obrázků k článku. S PHP problém nemám, ale v javascriptu bohužel neumím.
Potřebuji tedy script, který zobrazí jedno pole input file a někde pod ním tlačítko přidat další obrázek, po kliknutí na něj by se zobrazil další input file atd. atd. Rovněž u toho potřebuji mít omezení na určitý počet, například vložit maximálně 10 obrázků, při pokusu vložit další by to vyhodilo alert. U každého vloženého inputu by ještě mělo být tlačítko pro jeho následné smazání.

Rovněž u toho potřebuji, aby se při vložení dalšího inputu nesmazali již vybrané obrázky v inputech předchozích. Pole by to mělo vkládat s atributem name ve formátu name="file[]".

Už asi 3 hodiny prohledávám internet a našel jsem spoustu takových řešení, ale v každém z nich chybí jedna z funkcí, kterou potřebuju a neumím si tam ty funkce přidat.

Tak se chci zeptat, jestli někdo nemá takovéhle udělátko již hotové nebo odkaz na takové řešení, dost by mi to pomohlo. Díky
vivanatura
Profil *
#2 · Zasláno: 4. 4. 2012, 22:41:16
Odpovědět Citovat
Ecrazit:
neslo by neco takoveho?
dejme tomu, ze budes mit odkaz na pridani dalsiho inputu "add_input". a na odebrani bude mit pridanou tridu "minus". nekde v kodu si drz pocet souboru - treba hidden pocet_souboru. 

$(".add_input").click(function(event){
var id = $(this).attr("id");

if($(this).hasClass("minus")){
$('#' + id).remove();
var pocet = $("#pocet_souboru").val();
realCount--;
$("#pocet_souboru").val(realCount);

}
else{
var pocet = $("#pocet_souboru").val();
if (pocet > 10){
alert('nelze pridat');
return;
}else{
realCount++;
$("#pocet_souboru").val(realCount);
}
//tady zobrazis novy input s id++ nebo tak
}

)};

je to jenom nastrel, mozna tam jsou chyby v zavorkach nebo dalsi, ale myslim, ze takhle nejak by to mohlo jit
_es
Profil
#3 · Zasláno: 4. 4. 2012, 22:56:16 · Upravil/a: _es o okamžik později
Odpovědět Citovat
Ecrazit: 
var e = document.createElement("input");
e.type = "file";
e.name = "file[]";
Ďalej použiješ nejako vhodne metódu appendChild alebo metódu insertBefore.
Ecrazit
Profil *
#4 · Zasláno: 4. 4. 2012, 23:04:19
Odpovědět Citovat
No moc tomu co mi tu píšete nerozumím :( Jak jsem psal, o JS nevím vůbec nic. Našel jsem teď jedne kód, který funguje perfektně, jen mu chybí to, že v něm není to omezení jen pro určitý počet vložených inputů. Dokázal by to někdo upravit tak, aby tam ta funkce byla? 

function addEvent() {
    var ni = document.getElementById('myDiv');
    var numi = document.getElementById('theValue');
    var num = (document.getElementById("theValue").value -1)+ 2;
    numi.value = num;
    var divIdName = "my"+num+"Div";
    var newdiv = document.createElement('div');
    newdiv.setAttribute("id",divIdName);
    newdiv.innerHTML = '<input type="file" id="myfile[]" name="myfile[]"> <a href="javascript:;" onclick="removeEvent('+divIdName+')">Odstranit</a>';
    ni.appendChild(newdiv);
}

function removeEvent(divNum) {
    var d = document.getElementById('myDiv');
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
    var numi = document.getElementById('theValue');
    numi.value = numi.value - 1;
}

<form method="post" action="" name="form1">
  <input type="hidden" value="0" id="theValue" name="theValue" />
  <p><a href="javascript:;" onclick="addEvent();">Přidat další obrázek</a></p>
  <div id="myDiv"> <script type="text/javascript">addEvent(); </script></div>
  <input type="submit" name="submit">
</form>
vivanatura
Profil *
#5 · Zasláno: 4. 4. 2012, 23:13:43
Odpovědět Citovat
pridal jsem tam toto, snad by to melo jit: 


    if(numi == 10){
    alert('nelze vlozit vice jak 10 souboru');
    return;
    }
tzn. pri kliknuti na pridat to zkontroluje, zda uz neni v dokumentu 10 inputu, pokud ano, vyhodi to okno s upozornenim. Akorat moc nechapu tohle:
var num = (document.getElementById("theValue").value -1)+ 2; nejdriv se odecte jedna a pak se prida 2? Ale mozna to je tim, ze jsem to projel jen v rychlosti.... 

function addEvent() {
    var ni = document.getElementById('myDiv');
    var numi = document.getElementById('theValue');
    if(numi == 10){
    alert('nelze vlozit vice jak 10 souboru');
    return;
    }
    var num = (document.getElementById("theValue").value -1)+ 2;
    numi.value = num;
    var divIdName = "my"+num+"Div";
    var newdiv = document.createElement('div');
    newdiv.setAttribute("id",divIdName);
    newdiv.innerHTML = '<input type="file" id="myfile[]" name="myfile[]"> <a href="javascript:;" onclick="removeEvent('+divIdName+')">Odstranit</a>';
    ni.appendChild(newdiv);
}
 
function removeEvent(divNum) {
    var d = document.getElementById('myDiv');
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
    var numi = document.getElementById('theValue');
    numi.value = numi.value - 1;
}
Ecrazit
Profil *
#6 · Zasláno: 4. 4. 2012, 23:20:32
Odpovědět Citovat
bohužel nic, lze přidávat i více jak 10 inputů.

Ikdyž o tom skoro nic nevím, tak mi taky ten řádek přišel zvláštní, nevím proč to tak je...
vivanatura
Profil *
#7 · Zasláno: 4. 4. 2012, 23:34:33
Odpovědět Citovat
Ecrazit:

a teď?
Je tam ještě hidden ve formu. 
<script>
function addEvent() {
    
    var ni = document.getElementById('myDiv');
    var numi = document.getElementById('theValue').value;
    var num = (document.getElementById("theValue").value -1)+ 2;
    numi.value = num;

        var count = document.getElementById('count').value;

        if(count == 10){
        alert('max');
        return;
        }
        count++;
        document.getElementById('count').value= count;

    var divIdName = "my"+num+"Div";
    var newdiv = document.createElement('div');
    newdiv.setAttribute("id",divIdName);
    newdiv.innerHTML = '<input type="file" id="myfile[]" name="myfile[]"> <a href="javascript:;" onclick="removeEvent('+divIdName+')">Odstranit</a>';
    ni.appendChild(newdiv);
}
 
function removeEvent(divNum) {
        var count = document.getElementById('count').value;

        count--;
        document.getElementById('count').value= count;

    var d = document.getElementById('myDiv');
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
    var numi = document.getElementById('theValue');
    numi.value = numi.value - 1;
}
</script>





<form method="post" action="" name="form1">
  <input type="hidden" value="0" id="theValue" name="theValue" />
  <input type="hidden" value="0" id="count" name="count" />
  <p><a href="javascript:;" onclick="addEvent();">Přidat další obrázek</a></p>
  <div id="myDiv"> <script type="text/javascript">addEvent(); </script></div>
  <input type="submit" name="submit">
</form>
Ecrazit
Profil *
#8 · Zasláno: 4. 4. 2012, 23:40:11
Odpovědět Citovat
takhle funguje to omezení na maximum, ale přestalo fungovat odstraňování
vivanatura
Profil *
#9 · Zasláno: 4. 4. 2012, 23:50:09 · Upravil/a: vivanatura
Odpovědět Citovat
Ecrazit:
tak to posledni co jsem posilal smaz, nech to puvodni a jak jsem psal tu podminku 
    if(numi == 10){
    alert('nelze vlozit vice jak 10 souboru');
    return;
    }

tak zmen numi za num.... me to funguje..predtim jsem to psal primo se, ted jsem si to uz odzkousel


respektive: 

 if(num > 10){
     alert('max');
     return;
 }

a dej to pred numi.value = num;
Ecrazit
Profil *
#10 · Zasláno: 5. 4. 2012, 00:07:52
Odpovědět Citovat
Jasný, už to funguje :) tak díky moc ;) tohle mě aspon dokopalo k tomu, začít se učit JS...
vivanatura
Profil *
#11 · Zasláno: 5. 4. 2012, 00:10:07
Odpovědět Citovat
Tak to jsem rád ... promiň za tolik oprav, ale dělal jsem něco okolo, takže jsem tam spoustu věcí přehlídnul a sám bych si dal lepáka :-)
Časová prodleva: 11 let

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0