Autor Zpráva
quatzael
Profil
Mám formulář s inputem type="file" pro upload souboru. A ten jsem chtěl skrýt a nahradit nastylovanými inputy jako jsem zmínil zde: Nastylování inputu type="file" - nejlepší způsob?


Formulář je takto:
<form id="form" method="post">
<input id="uploader" name="uploader-file" type="file" />
<input id="browse" type="button" value="Procházet" />
<input id="submit" type="button" value="Odeslat" />
</form>

A script:
$("#browse").click(function(){
$("#uploader").click();
});

$("#submit").click(function(){
$("#form").submit();
});


Problém je, že formulář se odešle až na třetí pokus, pokud zadám cestu k souboru pomocí tlačítka id="browse".

Když kliknu na tlačítko id="browse" tak se mi normálně zobrazí okno, ze kterého vyberu požadovaný soubor.
Po kliknutí na ok se cesta k tomuto souboru zobrazí v textové části inputu type="file" (u IE10), ale při následném pokusu o odeslání formuláře pomocí tlačítka id="submit" se z té textové části ta cesta smaže a formulář se neodešle. Musím kliknout na tlačítko id="submit" ještě dvakrát, aby se formulář odeslal, přičemž ta cesta v tom filovým inputu stále zůstává prázdná (znovu cestu k souboru už nezadávám). A potom teprve se formulář normálně odešle a trochu překvapivě i včetně toho uploadovanýho souboru..

Hází mi to chybu: Přístup byl odepřen. jquery.js: Řádek 3175, znak 6. (zde řádek 24)

event.type = type;

        // If nobody prevented the default action, do it now
        if ( !onlyHandlers && !event.isDefaultPrevented() ) {

            if ( (!special._default || special._default.apply( elem.ownerDocument, data ) === false) &&
                !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) {

                // Call a native DOM method on the target with the same name name as the event.
                // Can't use an .isFunction() check here because IE6/7 fails that test.
                // Don't do default actions on window, that's where global variables be (#6170)
                // IE<9 dies on focus/blur to hidden element (#1486)
                if ( ontype && elem[ type ] && ((type !== "focus" && type !== "blur") || event.target.offsetWidth !== 0) && !jQuery.isWindow( elem ) ) {

                    // Don't re-trigger an onFOO event when we call its FOO() method
                    old = elem[ ontype ];

                    if ( old ) {
                        elem[ ontype ] = null;
                    }

                    // Prevent re-triggering of the same event, since we already bubbled it above
                    jQuery.event.triggered = type;
                    elem[ type ]();
                    jQuery.event.triggered = undefined;

                    if ( old ) {
                        elem[ ontype ] = old;
                    }
                }
            }
        }

        return event.result;
    },


Když to ale zadám přímo přes ten input type="file" tak to funguje úplně ok.
_es
Profil
quatzael:
Viď vlákno a príspevok Nefunkční click event na file input z jiného inputu (jQuery).
quatzael
Profil
_es:
Jenže já mám jinej problém. Mě se to dialogový okno normálně zobrazuje i s použitím té funkce click. Problém je ten, že to potom nejde odeslat (napoprvé), když tu cestu k souboru vyberu s pomocí tý funkce click. A ten input type="file"zatím nemám ani nijak skrytej, takže v tom by problém neměl být.
quatzael
Profil
Ještě bych doplnil, že ten můj problém se týká pouze IE (IE10), Mozilla a Chrome fungují bez problému..
_es
Profil
quatzael:
Jenže já mám jinej problém.“...„můj problém se týká pouze IE (IE10)
Máš presne ten istý problém, a to, že <input type=file> je „špeciálny“ formulárový prvok a vyvolanie jeho funkčnosti inak ako priamo cez neho je v rôznych prehliadačoch rôzne zakázané/obmedzené. A ak tvoj kód v niektorých funguje teraz, nemusí fungovať v novších verziách. Prečo nepoužiješ riešenie v odkaze v [#2]?
quatzael
Profil
_es:
Prečo nepoužiješ riešenie v odkaze v [#2]?
Nějak nevím jaký řešení máš na mysli.. Jako že se mám na to úplně vyprdnout a nechat tam normální nenastylovanej input?
Z toho vlákna totiž nic konkrétního moc neplyne..
_es
Profil
quatzael:
Z toho vlákna totiž nic konkrétního moc neplyne..
Čo sa ti zdá „nekonkrétne“ na rade "musis umistit ten input file nad ten textovy input a dat mu opacity: 0;"?
quatzael
Profil
_es
quatzael
Profil
_es:
Píšu teď z mobilu a smazalo se mi to..
Ten input file mám nad tím textovým.
A pokud jde o opacity tak tu tam zatím nemám žádnou, protože to zatím jen zkouším a ten input nemám ani nijak schovanej pomocí display nebo visibility..

Takže je tam normálně vidět a pod tím mám ten textovej input spolu s tlačítkem s funkcí click, kterým zobrazuje to dialogové okno pro výběr souboru..

Znovu upozorňuju, že nemám problém s tím co se řeší v tom odkazovanem vlakne. Tedy, že by se mi nezobrazovalo to dialogový okno. To se mi normálně tím tlačítkem s funkcí click zobrazuje.

Problém je ten, že pokud takto přes ro klikací tlačítko ten soubor vyberu, musím třikrát submitovat formulář, aby se odeslal. A to uz dělám jiným tlačítkem pomocí funkce submit().

Když ten soubor vyberu přímo přes to tlačítko u toho inputu file tak se formulář odešle normálně na první pokus..


Teď nejsem na kompu takže nemuzu vyzkoušet tu opacity, ale nevím jakej by to mělo vliv na to fungování, když to nefunguje ani takhle nenastylovany..
quatzael
Profil
_es:
No, tak zkusil jsem tam dát to opacity: 0; (input je teď průhlednej), ale samozřejmě podle očekávání to ani s tím nefunguje.
Ten problém je prostě jinde, už jsem to tady popisoval a nevím jak to už mám líp vysvětlit.
_es
Profil
quatzael:
Veď ale v tom formulári nemáš vôbec normálne odosielacie tlačítko ( Formuláře » Atribut type určuje typ políčka). Ako ten súbor odošlú návštevníci bez JS? Okrem toho by nebolo prekvapivé, ak by takýto atypický neodosielateľný formulár niektoré prehliadače „pomýlil“ pri jeho spracovaní.

Ešte si zrejme aj nepochopil radu v tom odkazovanom vlákne:
Když to ale zadám přímo přes ten input type="file" tak to funguje úplně ok.
Tá rada zabezpečí to, aby to bolo „přímo přes ten input type="file"“ - „nad ten textovy input“ znamená, že to je „nad“ pomocou CSS pozicování » Překrývání (z-index).

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: