Fișierul Ajax se încarcă fișierul de intrare de progres. Încărcarea fișierelor pe server folosind ajax
Aceasta este foarte articol interesant, despre cum să încărcați fișiere pe server folosind tehnologia AJAX. După cum știți deja, ajax este javascript asincron, care vă permite să lucrați cu serverul fără a reîncărca paginile din browser. Această tehnologie este foarte utilă pentru implementarea ideii noastre: încărcați fișiere pe server fără a reîncărca paginile browserului. Ideea noastră poate fi implementată și în alte moduri, citiți despre toate acestea mai jos în articolul nostru.
Ce vom învăța astăzi? Încărcarea fișierelor pe server folosind AJAX + jQuery + PHPImplementarea încărcării fișierelor pe server folosind AJAX este puțin mai complicată decât trimiterea unui text POST sau GET cerere. Dar nu este atât de greu să înțelegi și să stăpânești această tehnică. Dacă încă nu înțelegeți pe deplin cum interacționează AJAX și PHP, vă sfătuiesc să citiți mai întâi articolul despre. Dar chiar dacă nu știți cum funcționează tehnologia AJAX, este în regulă, deoarece vom folosi biblioteca jQuery și pluginul ajax_upload. Și dacă urmați toate exemplele și instrucțiunile pas cu pas, atunci veți putea implementa un excelent încarcător de fișiere pe server.
Esența metodei: Vom crea o imagine HTML a încărctorului, care va conține: un câmp de introducere a fișierului, un buton de confirmare, un bloc de stare a descărcarii (va fi afișat: „încărcat” sau „eroare”), un ul listă (vor fi adăugate noi elemente DOM, cu alte cuvinte, lista fișierelor descărcate). Vom crea un handler pentru butonul de confirmare în JS, folosind sintaxa jQuery și vom transmite fișierul pluginului ajax_upload, care va trimite fișierul și toate datele necesare pe partea de server. Partea serverului, acesta este al nostru aplicație PHP, care va salva fișierul în folderul dorit și va returna rezultatul lucrării. Sau pur și simplu va returna un mesaj de eroare dacă ceva nu merge bine. Avem o sarcină, să începem?
Codul HTML ajax al încărctorului
Să creăm fișier HTML, care va conține scheletul încărctorului nostru de fișiere. Vă voi da codul HTML, apoi vă voi explica ce se întâmplă.
Incarca fisier
După cum puteți vedea, codul HTML al încărcării ajax este insuportabil de complex. Dar încă merită să clarificăm ce este:
< div id=" upload" >Încărcați fișierul este butonul nostru de confirmare pentru încărcarea unui fișier pe server. Mai jos este codul CSS pentru design.
< span id=" status" >- acesta este blocul în care vom plasa răspunsul din partea de server a aplicației. Fie „Încărcat”, fie „Eroare”.
< ul id=" files" >- aceasta este o listă de fișiere care au fost încărcate pe server de către jquery + ajax uploader.
După cum am promis, voi furniza mai jos codul de stil CSS pentru butoanele de confirmare a încărcării fișierului:
#upload( margin:30px 200px; padding:15px; font-weight:bold; font-size:1.3em; font-family:Arial, Helvetica, sans-serif; text-align:center; background:#f2f2f2; culoare: #3366cc; border:1px solid #ccc;
Aplicație PHP pe partea serverului
După cum s-a menționat în esența metodei, partea de server doar copiază (salvează) fișierul și returnează rezultatul muncii sale („Încărcat” sau „Eroare”). Dar acesta este doar un exemplu pe care nu ar trebui să te bazezi. Nu există protecție împotriva hack-uri de hackeri, și nu există limite pentru dimensiunea fișierului. Dacă creați un bootloader pentru uz public, asigurați-vă că implementați completările de mai sus. Mai jos este codul PHP pentru un exemplu de încărcare de fișiere, creați un fișier numit upload-file. php și introduceți următorul cod în el:
Dacă te uiți cu atenție, vei observa că totul aici este scris în text rusesc, sau mai degrabă:
$uploaddir – directorul de pe server unde vor fi încărcate fișierele.
$ file – numele fișierului descărcat, la care este atașată calea către directorul serverului.
Cel mai simplu lucru a fost deja făcut. Partea distractivă urmează – partea jQuery + AJAX a încărctorului de fișiere.
Cod JavaScript
Ca și în orice altă aplicație care utilizează JS, codul trebuie plasat în capul documentului. O alta notă importantă: înainte de a scrie acest cod JS, nu uitați să includeți în prealabil biblioteca jQuery și pluginul de încărcare ajax_. Dacă ai făcut deja asta, grozav, hai să începem să scriem niște cod:
$(function())( var btnUpload=$("#upload"); var status=$("#status"); nou AjaxUpload(btnUpload, ( acțiune: "upload-file.php", //Numele fișierului numele câmpului de introducere a fișierului: „uploadfile”, onSubmit: function(fișier, ext)( dacă (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext)))( // Validarea fișierului extensii status.text (Numai fișiere JPG, PNG, GIF"); return false; ) status.text("Se încarcă..."); ), onComplete: function(fișier, răspuns)( //Șterge starea textului de stare. text("") ; //Adăugați fișierele descărcate în foaie if(response==="success")( $("").appendTo("#fișiere").html("
"+fișier).addClass("succes"); ) else( $("").appendTo("#fișiere").text(fișier).addClass("eroare"); ) ) )); ));
Mai întâi, inițializam accesul la butonul de confirmare a încărcării și îl scriem în variabila btnUpload. În același timp, obținem acces la blocul de mesaje de pe server (status). Urmează lucrul cu pluginul de încărcare ajax. Creăm un nou obiect și specificăm parametrii de care avem nevoie:
Acțiune – calea către serverul nostru de gestionare a fișierelor încărcate.
Nume este numele câmpului de intrare din care vom primi fișierul încărcat pe server.
onSubmit – Funcții care sunt executate înainte ca ajax să încarce fișiere pe server. În cazul nostru, aceasta este validarea fișierelor descărcate (verificarea extensiilor acceptate). Dar din nou, verificarea, așa cum se spune pentru cei „închiși la minte”, această verificare este ușor de ocolit, așa că merită verificată din nou pe partea de server a aplicației.
stare. text – text care este afișat în timpul procesului ajax de încărcare a fișierelor pe server. Vă rugăm să rețineți că, dacă fișierele nu sunt acceptate, este afișat un mesaj de eroare.
onComplete – Rulați funcția când fișierul este încărcat pe server. În această funcție: ștergeți valoarea status.text; adăugați fișierele descărcate în foaia de fișiere.
După cum puteți vedea, încărcarea fișierelor pe server folosind AJAX este mai ușoară decât părea. Dar totuși, sunt confuz de prezența bibliotecii jQuery în această metodă. Și dacă știți cum să implementați descărcarea fișierelor Ajax fără a utiliza jQuery, vă rugăm să-mi spuneți în comentariile articolului.
Încărcarea mai multor fișiere pe server folosind AJAX, jQuery, PHPDacă, pentru nevoile tale personale, trebuie să faci o încărcare frumoasă a mai multor fișiere pe server folosind AJAX și PHP, atunci va trebui să folosești câteva completări la biblioteca jQuery. Și anume:
Pluginul jQuery Form v2.18
Plugin pentru lucrul corect ajax cu câmpuri și formulare.
De unde să obțineți: www.malsup.com/jquery/form/
Pluginul jQuery BlockUI v2.14
Un plugin care vă permite să afișați mesaje de eroare frumoase.
De unde să obțineți: www.malsup.com/jquery/block/
Plugin de încărcare a fișierelor multiple jQuery v1.31
Un plugin pentru biblioteca jQuery care vă permite să încărcați mai multe fișiere în același timp.
De unde să obțineți: www.fyneworks.com/jquery/multiple-file-upload/
Dacă ați descărcat deja toate aceste plugin-uri și, desigur, biblioteca jQuery, putem începe dezvoltarea. De asemenea, trebuie să creăm un fișier PHP, ca în exemplul anterior, care va procesa datele din partea serverului. Să-l numim: doajaxfileupload.php. Acum, mai detaliat.
jQuery Form Plugin este un plugin excelent, este folosit pentru a trimite fișiere către server folosind metoda ajax. Acest plugin poate fi folosit și în alte moduri.
Pluginul jQuery BlockUI – folosit în scopuri estetice, pentru a afișa mesaje frumoase despre funcționarea corectă a Plugin-ului de încărcare a fișierelor multiple.
Plugin de încărcare de fișiere multiple – acest plugin este baza programului nostru de încărcare de fișiere multiple. Vă permite să selectați mai multe fișiere. În același timp, are setări flexibile pentru limitarea tipului de fișiere, setarea numărului de fișiere descărcate, verificarea fișierului pentru duplicate (dacă un astfel de fișier este deja selectat) etc.
Acum avem tot ce ne trebuie, putem începe să dezvoltăm un script ajax pentru descărcarea mai multor fișiere.
În fișierul index.php, cred că totul este clar. Iată formularul real de încărcare a fișierului și biblioteca jQuery și toate pluginurile necesare pentru lucrul cu ajax sunt conectate. Câteva cuvinte despre configurarea codului și a pluginului:
$(".MultiFile").MultiFile(( accept:"jpg|gif|bmp|png|rar", max:15, STRING: ( elimina:"elimină", selectat:"Selectat: $fișier", refuzat:" Tip de fișier nevalid: $ext!", duplicat:"Acest fișier este deja selectat:\n$fișier!" )));
Specificați extensiile fișierelor permise pentru descărcare, indicați numărul maxim de fișiere descărcate.
$("#încărcare").ajaxStart(funcție())(((... ));
Afișează și elimină animația atunci când fișierele ajax sunt încărcate pe server.
$("#uploadForm").ajaxForm((... ));
Responsabil cu trimiterea fișierelor către server.
doajaxfileupload.php este partea noastră de server a aplicației, totul în ea este destul de clar, dacă aveți nevoie, îl puteți edita după gustul dvs.
Poate că totul este despre încărcarea mai multor fișiere pe server folosind AJAX, jQuery și PHP. Sper că totul funcționează la fel de bine pentru tine ca și pentru mine.
Încărcarea fișierelor folosind JS + IFRAME + PHPDacă ești fan nu al frumuseții, ci al funcționalității și al codului compact, atunci există o veste bună pentru tine. Puteți încărca fișiere pe server fără a reîncărca pagina nu numai folosind AJAX și tot felul de pluginuri jQuery. De asemenea, acest lucru poate fi implementat folosind JavaScript simplu, iframes și php (intotdeauna necesar). Faptul este că, folosind AJAX, este imposibil să implementați încărcarea fișierelor. XmlHttpRequest nu poate descărca fișiere. Deși, acest lucru poate fi ocolit. Folosind tehnologia Remote Scripting. Utilizând în mod specific IFRAME. Lucrul interesant este că vom crea un formular ca la un fișier normal de încărcare, doar în formular vom specifica target="rFrame" , referim la un iframe ascuns, care va fi reîncărcat, dar acesta nu va fi afișat vizual. După repornire, un apel de funcție JS va fi returnat din partea serverului PHP a aplicației, care va finaliza descărcarea fișierului.
Acest încărcător este simplu, este format din două fișiere și cântărește aproximativ 1 KB. Treci la subiect. Creați fișierul HTML și puneți codul acolo:
function onResponse(d) ( eval("var obj = " + d + ";"); alert("File " + obj.filename + (obj.success ? " " : " NOT ") + "loaded."); )
Aici vedem aproape aceleași componente ca atunci când pur și simplu încărcăm fișiere pe server, doar: target=" rFrame" - despre care am vorbit deja mai sus; Funcția onResponse – primește obiectul JSON pe care îl trimitem din partea serverului. De asemenea, nu uitați să specificați multipart/form-data, fără de care formularul nu va încărca fișiere. În continuare, să ne uităm la codul serverului din fișierul handler.php:
Partea de server a aplicației este similară cu primul exemplu din acest articol, cu excepția ieșirii codului javascript, care va fi executat după reîncărcarea iframe-ului și ne va informa despre rezultatul încărcării fișierului.
Un scenariu foarte simplu și interesant. Bineînțeles că îl poți îmbunătăți.
Există multe biblioteci pe Internet care implementează încărcarea fișierelor pe server. Deci, dezvoltatorul are o gamă largă de instrumente de utilizat. Dar uneori sunt destul de dificile pentru începători. Inițial, pentru articol, s-a decis să se scrie o bibliotecă simplă care să fie ușor de înțeles. Dar, din fericire, s-au găsit destul de multe pe internet implementare simplă descărcarea fișierelor, pe care s-a decis să le folosească. Se numește dmuloader și este un plugin jQuery.
Folosind dmuploader vom crea un uploader similar ca design cu cel implementat în wordpress. Cu glisare și plasare și clicuri! Să transgresăm!
Structura proiectului:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | #dropzone ( chenar : 4px întreruptă #bbb ; chenar-radius : 5px ; culoare : #444 ; padding : 25px ; text-align : center ; ) #dropzone .title ( font-size : 20px ; ) #dropzone input ( -moz -border-bottom-colors: none ; -moz-border-left-colors: none ; opacitate : absolut ; top : 0 ; transform (-300px , 0px ) #dropzone span ( fundal : #f7f7f7 ; margine : 1px solid #ccc ; culoare : #555 ; cursor : dimensiunea fontului : 16px ; 46px ; line-height : 44px ; padding : 0 36px ; |
Javascript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // index.php $(document).ready (funcție () ( $("#dropzone") .dmUploader (( url: "upload.php" , dataType: "json" , maxFileSize: 256 * 1014 , allowedTypes: " imagine/*" , onBeforeUpload: function (id) ( $) .show () ; ) , onUploadSuccess: function (id, response) ( $("div#output") .html (" ![](https://viws.ru/wp-content/uploads/2019/05/"
+
response.data
.url
+
) " ) ; ) , onUploadError: function (id, message) ( $.jGrowl ("Fișier: " + id + " nu a putut fi încărcat: " + mesaj, ( theme: "error" ) ) ; ), onFileTypeError: function (fișier ) ( $.jGrowl (, ( temă: „eroare”) ) ; ) , onFileSizeError: funcția (fișier) ( $.jGrowl ( „Fișierul este prea mare!!” , (temă: „eroare”) ) ; ) , onFallbackMode: function (mesaj) ( $.jGrowl ("Browserul dvs. nu este acceptat 8(" , ( tema: "eroare" ) ) ; ) ) ); |
Toate! Partea client este gata. Mai multe detalii:
Server
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | // upload.php require_once __DIR__ . „/protected/bootstrap.php” ; if (! IS_POST() || ! $_FILES ) ( stopAndResponseMessage("eroare" , "Numai POST, FIȘIERE") ) $fișiere = convertFileInformation($_FILES ) ; dacă (! isset ($fișiere [ "fișier" ] ) ) ( stopAndResponseMessage("eroare" , "Fișierul nu a fost încărcat" ) ; $file = $fișier [ "fișier" ] ; fișier [ "error" ] ) ) ) $mimeType = guessMimeType($file [ "tmp_name" ] ) ; if (! $mimeType ) ( stopAndResponseMessage("error" , "Tipul fișierului nu este recunoscut!") ; ) $ validMimeType = [ "image/png" , "image/jpeg" ] ; if (! in_array ($mimeType , $validMimeType ) ) ( stopAndResponseMessage( "error" , "Numai png și jpeg pot fi încărcate!") ; ) $size = dimensiunea fișierului ($ fișier [ "tmp_name" ] ) ; if ($size > 256 * 1024 ) ( stopAndResponseMessage("error" , "Fișierul este prea mare!!" ) ; ) $uploadDir = __DIR__ if (! is_writable (. $ uploadDir ) ) ( stopAndResponseMessage( „eroare” , „Dosarul de fișiere nu poate fi scris.” ) ; ) $filename = ora () . "-" . mt_rand (0000 , 9999 ) . "." . guessFileExtension($mimeType) ; if (! move_uploaded_file ( $file [ "tmp_name" ] , $uploadDir . "/" . $filename ) ) ) ( stopAndResponseMessage("eroare", "Fișierul nu a fost mutat!" ) ; ) sendResponse("încărcare", [ " url " => "fișiere/" . $filename ] ); |
Merită subliniat Atentie speciala pe funcția guessMimeType. Folosind extensia FileInfo, definește tip MIME fişier. După cum se poate vedea din cod, tipul și dimensiunea fișierului trimis din browser nu sunt detectate în timpul verificării. Ele pot fi falsificate de un atacator.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //protected/inc/func.php function guessMimeType($path , $magicFile = null ) ( if (! is_file ($path ) ) ( return null ; ) if (! is_redable ($path ) ) ( return null ; ) if (! $finfo = new \finfo(FILEINFO_MIME_TYPE, $magicFile) ) ( return ; ) return $finfo -> fisier ($cale ) ; |
Pe baza demo-ului, vă puteți aprofunda cunoștințele în acest domeniu. ÎN codurile sursă Sunt oferite link-uri pentru studii suplimentare. Experiment!
Probabil că mulți au dat peste întrebarea „Cum se încarcă un fișier pe server folosind JS și JQuery?”.
Și probabil că nu toată lumea a fost capabilă să facă asta. De fapt, totul nu este atât de dificil pe cât pare.
ÎN această lecție Voi descrie procesul de încărcare a unui fișier pe server (hosting).
Tehnologia Ajax este folosită pentru a face schimb de date între browser și serverul web.
Versiunea JQuery folosită în rețetă: 2.2.2.
Creăm un marcaj primitiv din etichete html, cap și corp.
În eticheta head trebuie să includeți calea către biblioteca jquery.
În exemplu, folosesc jquery de pe serverul Google.
ÎN eticheta corporală Creăm un formular care constă dintr-o etichetă de intrare și un buton.
Folosind tipul de intrare="fișier" selectați un fișier de încărcat.
Eticheta butonului este necesară pentru a rula codul js pentru a transfera fișierul.
Setăm formularul name="uploader", enctype="multipart/form-data", method="POST".
Nume formular: name="uploader"
Metoda de codificare a datelor din formular: enctype="multipart/form-data"
Metoda de transfer de date: method="POST"
Trimiteți acest fișier: Încărcați
Tot codul de markup html și js:
Trimiteți acest fișier: Încărcați
Să trecem la codul de script java.
Pentru a transfera un fișier, trebuie să transferați întregul formular:
$("formular").submit(funcția(e) (
Citim datele formularului într-o variabilă:
var formData = new FormData($(this));
Apoi, folosim tehnologia ajax pentru a transfera date pe serverul web.
Dacă transferul fișierului are succes, va fi afișat un mesaj într-o fereastră pop-up.
Dacă apare o eroare sau fișierul lipsește, va fi afișat un mesaj cu textul problemei care a apărut.
$.ajax(( url: „fișier.php”, tip: „POST”, date: formData, asincron: fals, succes: funcție (msg) ( alert(msg); ), eroare: funcție (msg) ( alert( „Eroare!”); cache: false, contentType: false, processData: false ));
Tot codul este în script java cu folosind jquery:
Acum tot ce mai rămâne este codul de pe partea serverului pentru a primi date din formular metoda POST cerere.
Obținem directorul rădăcină al site-ului și atribuim un folder pentru descărcarea fișierelor:
$uploaddir = $_SERVER["DOCUMENT_ROOT"].DIRECTORY_SEPARATOR."încărcări".DIRECTORY_SEPARATOR;
Citirea fișierului descărcat:
$uploadfile = $uploaddir . nume de bază($_FILES[„fișier utilizator”][„nume”]);
Verificăm dacă fișierul este încărcat.
În conformitate cu datele primite, atribuim un mesaj însoțitor.
Dacă fișierul nu este încărcat, încărcați-l în directorul specificat în $uploadfile:
if (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploadfile)) ( $out = "Fișierul este valid și a fost încărcat cu succes.\n"; ) else ( $out = "Posibil atac de încărcare de fișiere !\n"; )
Când sunt efectuate acțiunile specificate, este returnat un răspuns.
Tot codul in php:
Toate cod html inclusiv js:
Trimiteți acest fișier: Încărcați $("form").submit(function(e) ( var formData = new FormData($(this)); $.ajax(( url: "file.php", tip: "POST", date: formData, asincron: fals, succes: function (msg) ( alert(msg); ), eroare: function(msg) ( alert("Eroare!"); ), cache: false, contentType: false, processData: false )); e.preventDefault();
Descărcați fișierul cod sursă:
Încărcarea fișierelor sau a imaginilor pe un server este o sarcină destul de tipică. Dar progresul nu stă pe loc și, prin urmare, acum, desigur, vreau ca fișierele să fie descărcate fundal. De regulă, anterior acest lucru putea fi implementat folosind tehnologii flash sau iframe. De asemenea, mulți oameni folosesc pluginuri precum jQuery Form Plugin sau Ajax File Upload Plugin sau Multiple File Upload Plugin și o mulțime de altele. Odată cu apariția obiectului FormData, totul a devenit mult mai simplu. FormData() vă permite să compuneți un set de date pentru a le trimite către server folosind XMLHttpRequest.
Să încercăm să scriem propriul cod fără niciun plugin (bine, cu excepția cadrului jQuery, desigur) pentru a încărca imagini sau fișiere pe server în fundal. În general, algoritmul acțiunilor noastre va fi cam așa: completați câmpurile formularului cu date. Câmpurile pot fi orice, text, textarea, select și fișiere. Când selectați fișiere, datorită codului nostru jQuery, aceste fișiere vor fi descărcate în fundal într-un director temporar de pe server, de exemplu „tmp”. Apoi, când dați clic pe butonul de trimitere al formularului, datele sunt trimise către un script de server, care va procesa aceste date. Să ne imaginăm că acestea sunt articole. Vom înregistra datele transmise într-o bază de date cu un id unic. În continuare, vom crea un director în directorul „imagini” cu un număr unic „id” și dacă am avut fișiere în folderul „tmp”, le vom copia în folderul „id” creat și apoi ștergeți „tmp”. ” dosar. Pentru a rezuma: completăm imaginile în tmp ca fundal, la trimiterea formularului scriem datele în baza de date, vom avea un număr unic de înregistrare. Creăm un folder cu acest număr și ne mutăm fișierele acolo. Toate. În acest articol, nu vom lua în considerare încărcarea în baza de date și copierea fișierelor. Cred că aici va fi ceva pentru toată lumea. Ne vom concentra pe un singur lucru - încărcare asincronă imagini (sau fișiere).
Deci, aici este piesa noastră html. Aici vom acorda atenție faptului că avem un fișier GIF cu o imagine a preloader-ului (cerc în buclă), pe care îl ascundem de afișare cu stiluri. De asemenea, vom atribui id = fișier câmpului fișier și enctype = „multipart/form-data” formularului. Numele câmpului fișierului va fi fișier, adică astfel încât să putem lucra cu matricea, deoarece avem voie să încărcăm mai multe fișiere (atribut multiplu).
#preloader (vizibilitate: ascuns;) Adăugați informații 
În acest formular, pe lângă câmpul fișier, avem câteva câmpuri, de exemplu: input=text. Acestea. in fata noastra forma regulata de exemplu, pentru panoul de administrare, care este un set de câmpuri de care aveți nevoie. Pentru început, dacă doriți, puteți verifica funcționarea scriptului scriind liniile care arată matricea FILES la începutul fișierului:
//upload.php print_r($_FILES);
Acum să scriem scriptul serverului nostru, care va fi apelat de la folosind jQuery. Sarcina sa este să transfere fișierele încărcate din directorul temporar al serverului în al nostru, de exemplu, așa cum am decis în „tmp”, și apoi să le arătăm.
//funcția upload.php show_dir($dir) // funcție pentru afișarea imaginilor din folderul tmp ( $list = scandir($dir); unset($list,$list); foreach ($list ca $fișier) ( echo " "; ) ) foreach ($_FILES ca $key => $value) ( //mută fișierele în tmp move_uploaded_file($value["tmp_name"], "tmp/".$value["nume"]); ) show_dir( "./tmp/");
Și acum scriptul nostru js, care va încărca fișierele noastre pe server în fundal. Toată magia se va face datorită obiectului FormData(). Vom adăuga acest cod la sfârșitul index.php-ului nostru înainte de etichetă.
$(document).ready(function())( $("#preloader").hide(); $("#file").bind("schimbare", function())( var data = new FormData() ; eroare var = ""; jQuery.each($("#fișier").fișiere, funcția(i, fișier)< 1) { error = error + " Файл имеет неправильный размер! "; } //Проверка на длину имени if(file.size >1000000) ( eroare = eroare + " Fișier " + nume. fișier + " este prea mare."; ) // Verifică dimensiunea fișierului if(file.type != "image/png" && file.type != "image/jpg " " && !file.type != "image/gif" && file.type != "image/jpeg") ( eroare = eroare + "Fișier " + file.name + " nu se potrivește cu png, jpg sau gif" ; ) / /Verificarea tipurilor de fișiere data.append("fișier-"+i, fișier); )); if (eroare != "") ($("#info").html (eroare);) else ( $.ajax(( url: "upload.php", date: date, cache: false, contentType: false, processData: false, tip: "POST", beforeSend: function() ( $("#preloader").show(); ), succes: function(data)( $("#info").html(data); $("#preloader").hide();
Ei bine, asta pare să fie tot. Daca cineva nu intelege ceva, intreaba. Dacă are cineva completări, mă voi bucura și eu!
Sfat: dacă nu ați folosit încă cod pentru a șterge fișiere din niciun director, atunci vă recomand să schimbați funcția rmdir delete în echo pentru un test pentru a vă asigura că vor fi șterse numai acele fișiere pe care doriți să le ștergeți. Preîncărcările Gif pot fi luate, de exemplu, din lecția mea Cum se face animație Gif. Exemple la finalul articolului.
Dacă cineva dorește să adauge frumusețe, de exemplu o bară de progres, atunci pentru aceasta va trebui să adăugăm câteva linii de cod. ÎN șablon html vom adauga un super element din html5 - progress, iar in codul js vom adauga mai multe linii cu un obiect XMLHttpRequest.
Și astfel, html-ul nostru va fi completat cu următoarele:
Și vom adăuga la codul js:
Funcția progresHandlingFunction(e)( if(e.lengthComputable)( $("progres").attr((value:e.loaded,max:e.total)); ) )
Xhr: function() ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // verifică dacă încărcarea este în curs myXhr.upload.addEventListener ("progres",progressHandlingFunction, false); //trece pentru a funcționa valorile) returnează myXhr;
Rezultatul final al codului js:
$(document).ready(function())( function progressHandlingFunction(e)( if(e.lengthComputable)( $("progres").attr((valoare:e.loaded,max:e.total)); ) ) $("#preloader").hide(); $("#file").bind("schimbare", function())( var data = new FormData(); var error = ""; jQuery.each( $( "#fișier").fișiere, funcție(i, fișier) ( if(fișier.nume.lungime< 1) { error = error + " Файл имеет неправильный размер! "; } if(file.size >1000000) ( eroare = eroare + " Fișier " + nume. fișier + " este prea mare."; ) if(file.type != "image/png" && file.type != "image/jpg" && !fișier. tip != „imagine/gif” && file.type != „image/jpeg”) ( eroare = eroare + „Fișier „ + nume.fișier + „ nu se potrivește cu png, jpg sau gif”; ) data.append( "fișier -"+i, fișier); )); if (eroare != "") ($("#info").html (eroare);) else ( $.ajax(( url: "productUploadImg.php", tip: "POST", xhr: function()) ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // se verifică dacă încărcarea este în curs myXhr.upload.addEventListener("progress",progressHandlingFunction, false); //transmiterea de valori la funcție ) return myXhr ), date: date, cache: false, contentType: false, processData: false, beforeSend: function() ( $("#preloader").show(); ), succes: function(data)( $( "#info" ).html(data); $("#preloader").hide(); error: errorHandler = function() ( $("#info").html("Eroare la încărcarea fișierelor"); ) )); ) )) ));
