Vi börjar lära oss jQuery, och det allra första vi behöver göra är att installera jQuery på vår sida. Vi kommer också att överväga vilka versioner som finns tillgängliga för installation. Vi kommer att titta på allt detta i den här artikeln.
Först och främst måste du ladda ner jQuery från den officiella webbplatsen: http://jquery.com/download/. Jag rekommenderar att du laddar ner jQuery version 1.x istället för 2.x, eftersom den senare inte stöds av IE6-IE8.
Det finns två typer av jQuery-bibliotek tillgängliga för nedladdning: komprimerade och okomprimerade. Driftsmässigt är de identiska, men den komprimerade versionen väger betydligt mindre (på grund av borttagningen av onödiga blanksteg), vilket är oerhört viktigt för sidan. Den okomprimerade versionen behövs om du behöver titta på jQuery-källkoden, även om sådana situationer är extremt sällsynta, så ladda ner den komprimerade versionen av jQuery omedelbart.
Efter att du har laddat ner jQuery måste du kopiera den till en mapp på webbplatsen. Låt oss säga att sökvägen till jQuery är: "js/jquery.js". Då ingår jQuery-biblioteket enligt följande:
Och det sista steget är att kontrollera funktionaliteten hos jQuery-biblioteket. Detta är nödvändigt för att inte använda något som inte ens är 100% anslutet ännu, och sedan tänka på var felet finns i koden, även om felet uteslutande är i att ansluta jQuery. Så för att testa jQuery kan du använda följande kod:
if (window.jQuery) alert("jQuery är ansluten");
else alert("jQuery är inte ansluten");
Om ett popup-fönster visas med texten "jQuery ansluten", kan du radera den här koden och börja skriva skript med hjälp av det här biblioteket. Sök annars efter ett anslutningsfel.
I det här inlägget kommer du att lära dig hur du implementerar AJAX-uppladdning av filer till servern med hjälp av jQuery. Det är inte så svårt!
Jag vet inte säkert, men något säger mig att före tillkomsten av jQuery var uppladdning av filer till en server med AJAX-teknik något väldigt obegripligt och därför extremt svårt. Men idag, med tillkomsten av jQuery, kan även en oerfaren webbmaster göra detta utan större ansträngning. Men på ett eller annat sätt måste du ändå räkna ut det. Och nu ska jag försöka att mycket kort och tydligt förklara för dig hur detta går till, och för att göra det lättare att förstå innehåller lektionen bara det som är nödvändigt och är uppdelat i steg.
Jag kommer att notera i förväg att den här artikeln sannolikt inte kommer att hjälpa om du har mycket liten förståelse för jQuery och PHP. Och kanske är det nödvändigt att ha åtminstone lite erfarenhet av att ladda upp filer (bilder) till servern från ett vanligt HTML-formulär, åtminstone måste du ha en uppfattning om hur det fungerar.
Tja, mindre ord, låt oss börja!
Till att börja med, låt oss anta att vi har följande HTML-kod: ett fält och en nedladdningsknapp:
ladda ner filer
1. Hämta fildata från filfältetDet första vi behöver göra är att hämta indatafältsdata när vi lägger till fil(er) till den. För att göra detta, bifoga vår funktion till förändringshändelsen, som kommer att ställa in fildata:
// Variabel där fildata kommer att finnas var filer; // Häng funktionen på händelsen // Hämta fildata och lägg till den i variabeln $("input").change(function())( files = this.files; ));
Den här koden kommer att spara typ="file"-fältdata i filvariabeln, som vi kommer att arbeta med härnäst.
2. Ladda ner filer genom att klickaNu måste vi bifoga en klickhändelse till knappen "Ladda upp filer". Det är hit en AJAX-förfrågan med fildata kommer att skickas.
Låt oss skapa en funktion, bifoga den till klickhändelsen och skicka en AJAX-förfrågan med fildata. Denna begäran skiljer sig från en vanlig AJAX-förfrågan, och den vanliga sändningen av POST-data är inte lämplig här:
// Vi bifogar en funktion till klickhändelsen och skickar en AJAX-förfrågan med fildata $(".submit.button").click(function(event)( event.stopPropagation(); // Stop what is happening event.preventDefault (); // Slutför det som händer // Skapa formulärdata och lägg till fildata från filer var data = new FormData(); ); )); Skicka begäran $.ajax(( url: "./submit.php?uploadfiles", skriv: "POST", data: data, cache: false, dataType: "json", processData: false, // Bearbeta inte filer (Bearbeta inte filerna) contentType: false, // Så jQuery kommer att berätta för servern att detta är en strängbegäran framgång: function(respond, textStatus, jqXHR)( // Om allt är OK if(typeof respond.error === "undefined")( // Filerna har laddats upp, gör något här // visa sökvägarna till de uppladdade filerna i ".ajax-respond"-blocket var files_path = respond.files; var html = ""; $.each(files_path, function(key, val) (html += val +"
"; )) $(".ajax-respond").html(html); ) else( console.log("Server RESPONSE ERRORS: " + respond.error); ) ), error: function(jqXHR, textStatus, errorThrown )( console.log("AJAX begäran FEL: " + textStatus); ) ));
Vad gör funktionen? Skapar ett nytt objekt new formData() och lägger till fildata från filarrayen till det. Detta formulärdataobjekt skickas sedan till AJAX-förfrågan. 2 parametrar måste ställas in på false:
- processData - eftersom jQuery kommer att konvertera filarrayen till en sträng och servern kommer inte att kunna ta emot data.
- contentType - eftersom jQuery har som standard application/x-www-form-urlencoded , vilket inte tillåter filinlämning. Dessutom, om du ställer in den här parametern till multipart/form-data , verkar det inte göra någonting.
För att tydligt visa hur man behandlar begäran som skickas i andra stycket kommer jag att tillhandahålla ett enkelt PHP-skript, utan några kontroller.
Låt oss skapa en submit.php-fil och lägga till den här koden till den (det antas att submit.php finns i samma mapp som filen från vilken AJAX-förfrågan skickas):
