HTML5 - Upload filer

Når vi har dataindsamlingsskemaer på en side HTML5 Udover at vi kan tage data med inputfeltfelter, kan vi også uploade filer, med dette kan vi fremskynde indlæsning af visse data, der er umulige at udtrykke i tekst, eller som kan være meget lange tekster, det er sædvanligt at uploade billede filer eller pdf -filer, da disse to formater er meget populære, dog med Ajax vi kan uploade næsten enhver type fil.
Upload filer
Til uploade filer ved hjælp af Ajax, skal vi oprette et filtypefelt i en form og i vores rutine Ajax bruge et objekt FormData hvormed vi indsamler dataene for at kunne give dem det nødvendige format og uploade vores fil til serveren.
Objektet FormData det skal bruges med forsigtighed, da der stadig kan være versioner af browsere, der ikke fuldt ud understøtter det, men det er en ret solid løsning.
Lad os se i følgende kode, hvordan du laver en grundlæggende filupload:

 EksempelBananer:Æbler:Kirsebær:Fil:Total:0 varerSend formular 

Ved inkorporering af filtypen input, objektet FormData laver automatisk arrangementer, så vores fil kan uploades til serveren, i følgende billede kan vi se, hvordan browseren fortolker dette:

I dette tilfælde var det et temmelig let billede, så filoverførselstiden til serveren er ikke mærkbar, men hvis det var en 30 MB pdf, ville tiden være meget længere, da dette er gennemsigtigt for brugeren, tror han måske, at siden ikke "gør noget" eller det var "at tænke" for at undgå dette, kan vi indarbejde en statuslinje, som fremskridt bliver synlig med.
For at se stigningen i stigningen kommer vi til at bruge objektet XMLHttpRequest for at kontrollere anmodningens status Ajax:

 EksempelBananer:Æbler:Kirsebær:Fil:Fremskridt:Total:0 varerSend formular 

Vi har defineret et element fremskridt og med ham XMLHttpRequest -objekt Vi kan tildele værdierne, mens uploaden skrider frem, i browseren kan vi se den som følger:

FORSTØRRE

Vi kan bruge Ajax For meget mere end at konsultere elementer på andre sider, kan vi også bruge det til at forbedre vores formularer, når det kommer til at indsamle data.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt