✅ HTML5 - Ladda upp filer

Innehållsförteckning

När vi har datainsamlingsformulär på en sida HTML5 Förutom att vi kan ta data med inmatningstypfält kan vi också ladda upp filer, med detta kan vi påskynda laddningen av vissa data som är omöjliga att uttrycka i text eller som kan vara mycket långa texter, det är vanligt att ladda upp bild filer eller pdf -filer, eftersom dessa två format är mycket populära, dock med Ajax vi kan ladda upp nästan vilken typ av fil som helst.
Ladda upp filer
Till ladda upp filer med Ajax, måste vi skapa ett filtypfält i ett formulär och i vår rutin Ajax använda ett objekt FormData som vi kommer att samla in data för att kunna ge dem det nödvändiga formatet och ladda upp vår fil till servern.
Objektet FormData det måste användas med försiktighet eftersom det fortfarande kan finnas versioner av webbläsare som inte helt stöder det, men det är en ganska solid lösning.
Låt oss se i följande kod hur du gör en grundläggande filöverföring:

 ExempelBananer:Äpplen:Körsbär:Fil:Total:0 artiklarSkicka formulär

När filtypsinmatningen införlivas, objektet FormData automatiskt ordnar så att vår fil kan laddas upp till servern, i följande bild kan vi se hur webbläsaren tolkar detta:

I det här fallet var det en ganska ljus bild så filöverföringstiden till servern är inte märkbar, men om det var en 30 MB pdf skulle tiden vara mycket längre, eftersom detta är transparent för användaren kan han tro att sidan är inte "gör någonting" eller det var "tänkande" för att undvika detta kan vi införliva en förloppsindikator som gör framstegen synliga.
För att se hur klättringen går, kommer vi att använda föremålet XMLHttpRequest för att verifiera begärans status Ajax:

 ExempelBananer:Äpplen:Körsbär:Fil:Framsteg:Total:0 artiklarSkicka formulär

Vi har definierat ett element framsteg och med honom XMLHttpRequest -objekt Vi kan tilldela värdena medan uppladdningen fortskrider, i webbläsaren kan vi se det så här:

FÖRSTORA

Vi kan använda Ajax För mycket mer än att konsultera element på andra sidor kan vi också använda det för att förbättra våra formulär när det gäller att fånga data.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng