Vă atrag atenția asupra fraziunii "fără reîncărcarea paginii" - aceasta nu utilizează AJAX. Deoarece trebuie să înțelegeți în mod clar că prin utilizarea AJAX nu este posibilă încărcarea unui fișier pe server.
Cu toate acestea, puteți aranja un proces de descărcare din punctul de vedere al transferului de fișiere de utilizator la server va par a fi asincron. O puteți face în așa fel încât după ce utilizatorul selectează fișierul și dă clic pe butonul „Submit“, pagina pe care se află nu va fi suprasolicitat, ci afișează „Încărcarea fișierului pe server.“ După descărcarea fișierului, apare un mesaj cu rezultatul descărcării. În acest caz, fișierul va fi descărcat pe server în mod obișnuit.
Cu privire la modul de a face acest lucru, voi încerca să spun în acest articol!
Deci, să creăm o pagină upload.html cu formularul nostru pentru a încărca fișierul și un cadru invizibil:
După cum puteți vedea, acesta este forma obișnuită pentru încărcarea unui fișier pe server, numai parametrul țintă specifică id-ul cadrului ascuns! De asemenea, în cod există un container pentru afișarea rezultatului descărcării.
Acum, în cazul în care utilizatorul selectează un fișier și dă clic pe butonul „Încărcare“, fișierul va fi trimis la server, iar rezultatul va fi încărcat într-un iframe ascuns. După transferarea datelor pe iframe, este necesar să le transferăm pe pagina principală.
Funcția hideBtn () se numește atunci când trimiteți fișierul și este utilizat pentru a informa utilizatorul că descărcarea, precum și ascunde butonul „Încărcare“ pentru a până când răspunsul a venit de la server, utilizatorul nu poate încărca un nou fișier.
Funcția handleResponse () va fi apelată din iframe în răspunsul serverului. Dacă rezultatul este obținut, vom afișa din nou butonul "Descărcare". Dacă există erori - le afișăm, altfel vom afișa un mesaj despre descărcarea de succes.
Acum, să creăm un fișier upload.php, care va fi trecut de fișier:
ale căror nume de proprietăți vor fi aceleași cu cheile matricei.
Dacă apare o eroare, acest obiect va conține următoarea valoare:
Dacă nu există erori, atunci acest obiect va conține informații despre fișierul descărcat.
Descărcați codul sursă aici!
Asta este! Mult noroc!
Articole similare
Trimiteți-le prietenilor: