Metoda descărcării asincrone a fișierelor descrise în această notă se bazează pe posibilitatea de a transfera date din formularul furnizat în standardul HTML la orice IFRAME disponibil pe pagină. Formularul este legat de IFRAME prin atributul "target", care trebuie să se potrivească atributului "name" al IFRAME.
Am început să scriu un fel de prototip HTML pentru a stabili adecvarea acestei metode în toate browserele.
Pentru a urmări ce vine de la formular la server, a creat fișierul "upload.php" cu următorul cod:
Verificat - funcționează chiar și în IE (Internet Explorer 8 în modul IE7).
plus o funcție atribuită în handlerul de evenimente onChange al elementului INPUT:
Am crezut că am făcut totul în mintea mea, dar nu era acolo. În Mozilla Firefox, Google Chrome și Opera toate funcționează exact așa cum trebuie, dar IE a provocat agitație. au fost create toate elementele, la prima vedere, este normal, dar formele sabmite, pentru un motiv oarecare, datele transmise nu se află în IFRAME, și într-o fereastră nouă, cu matrice $ _FILES era gol, iar în matrice $ _POST a apărut elementul «încărcare» cheie . Evident, datele de la intrare meu într-un fel nu au fost în $ _FILES, și $ _POST. Această situație apare în cazul în care forma nu indică o metodă de codare a datelor atunci când acesta este trimis la server „multipart / form-data“ (atributul «enctype»). Era surprins. Am început să văd DOM cu ajutorul instrumentelor pentru dezvoltatori.
Studierea DOM și a constatat că atributul «ENCTYPE» în formă de standuri la fel, cum ar fi ai nevoie, dar în loc de intrare și de IFRAME atributul «Numele» atribut sunt «submitName». Surprins chiar mai mult. A devenit clar de ce datele din formular nu este în IFRAME a zburat departe, și într-o fereastră nouă - pentru că IFRAME cu numele specificat în atributul «țintă» în formularul de pe pagina lipsește (acesta este numele pentru un motiv oarecare, transformat în «submitName» atribut).
În timp ce situația cu datele despre accesările cu INPUT-și matrice $ _POST în loc de $ _FILES încă și rămâne neclar, a decis să înceapă cu eliminarea problemei «numele» atribut în intrare și IFRAME.
Am încercat să stabilesc valoarea atributului "name" nu prin metoda setAttribute (), ci pur și simplu ca proprietate obiect: input.name = 'upload' și frame.name = 'frame'. Rezultatul este același.
Googling, a aflat rapid că problema "submitName" în IE are într-adevăr un loc de a fi. Soluția la această problemă a fost foarte simplă - trebuie să creați elemente prin intermediul innerHTML imediat cu atributul "name" prescris. Mi-a plăcut soluția găsită pe Internet, care permite obținerea unui element sub forma unui obiect, în ciuda faptului că acesta este, de fapt, creat cu ajutorul interiorHTML. Pentru ușurința utilizării, am proiectat această metodă într-o funcție.
Trebuie remarcat faptul că, prin utilizarea acestei abordări în IE din anumite motive, nu este posibil să se stabilească INPUT atributul «tip» prin setAttribute () sau printr-un obiect de proprietate, deci type = „file“, a prescrie, de asemenea, în innerHTML.
În cele din urmă, a funcționat în IE.
Dar problema în IE, astfel încât datele din formularul INPUT nu intră în matricea $ _FILES este încă păstrată. Încă o dată, m-am uitat atent la instrumentele de dezvoltare DOM - forma are într-adevăr enctype = "multipart / form-data". WTF. După mult gândire, experimentare și Google, am încercat să înregistrez atributul "enctype" direct în innerHTML.
Oh, un miracol. A câștigat. În lumina acestei descoperiri, apare întrebarea firească - cât de mult aveți încredere în instrumentele dezvoltatorului IE?
În concluzie, pentru ca descărcarea fișierelor să funcționeze, modificați codul de fișier "upload.php":
Fișierele sunt încărcate în dosarul "încărcări", alertele raportează rezultatele descărcării. Funcționează în toate browserele, inclusiv IE. Scopul este atins.
În arhiva atașată la articol, veți găsi versiunea finală a scriptului pentru descărcarea asincronă a fișierelor prin IFRAME ascuns.
Fișiere atașate
Trimiteți-le prietenilor: