HTML5 - Bestanden uploaden

Wanneer we formulieren voor gegevensverzameling op één pagina hebben HTML5 Behalve dat we gegevens kunnen opnemen met invoertypevelden, kunnen we ook bestanden uploaden, hiermee kunnen we het laden van bepaalde gegevens versnellen die niet in tekst kunnen worden uitgedrukt of die erg lange teksten kunnen zijn, het is gebruikelijk om afbeelding te uploaden bestanden of pdf-bestanden , aangezien deze twee formaten erg populair zijn, echter met Ajax we kunnen bijna elk type bestand uploaden.
Upload bestanden
Tot bestanden uploaden met Ajax, we moeten een veld voor het bestandstype maken in een formulier en in onze routine Ajax gebruik een object FormData waarmee we de gegevens zullen verzamelen om ze het benodigde formaat te kunnen geven en ons bestand naar de server te kunnen uploaden.
Het object FormData het moet met zorg worden gebruikt, omdat er nog steeds versies van browsers kunnen zijn die het niet volledig ondersteunen, maar het is een redelijk solide oplossing.
Laten we in de volgende code kijken hoe u een basisbestandsupload kunt doen:

 VoorbeeldBananen:Appels:Kersen:Bestand:Totaal:0 productenFormulier verzenden 

Bij het opnemen van de invoer van het bestandstype, wordt het object FormData maakt automatisch de afspraken zodat ons bestand kan worden geüpload naar de server, in de volgende afbeelding kunnen we zien hoe de browser dit interpreteert:

In dit geval was het een vrij lichte afbeelding, dus de uploadtijd van het bestand naar de server is niet merkbaar, maar als het een pdf van 30 MB zou zijn, zou de tijd veel langer zijn, omdat dit transparant is voor de gebruiker, hij zou kunnen denken dat de pagina niet "iets doet" of het was "denken" om dit te vermijden kunnen we een voortgangsbalk inbouwen waarmee de voortgang zichtbaar wordt.
Om de voortgang van de klim te zien gaan we het object gebruiken XMLHttpRequest om de status van het verzoek te verifiëren Ajax:

 VoorbeeldBananen:Appels:Kersen:Bestand:Voortgang:Totaal:0 productenFormulier verzenden 

We hebben een element gedefinieerd voortgang en met hem XMLHttpRequest-object We kunnen de waarden toewijzen terwijl de upload vordert, in de browser kunnen we het als volgt zien:

VERGROTEN

We kunnen gebruiken Ajax Voor veel meer dan het raadplegen van elementen op andere pagina's, kunnen we het ook gebruiken om onze formulieren te verbeteren als het gaat om het vastleggen van gegevens.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven