ES sapratu (meklējot sevi) ka tur ir daudz demos un konsultācijas, kas parādīs, kā vilkt un nomest failu pārlūkā un tad padarīt to lapā. Viņi bieži dēvē par “drag-and-drop un augšupielāde”, bet tie faktiskinav augšupielādēt. Šī apmācība jums šo pēdējo soli.
Es staigāt jūs cauripiemērs, ka jūs varat spēlēt ar: velciet failu mājas lapā, un tas tiks augšupielādēti uz servera uzreiz.
uzdevumi#
Pieņemsim pārtrauktu šo procesu sadalīt konkrētos uzdevumus:
- Capture piliens notikumu un lasīt savu datu.
- Post ka binārie dati uz serveri.
- Sniegt atsauksmes par progresu augšupielādes.
- Ja vēlaties padarīt priekšskatījumu, kas tiek augšupielādēts, un tā statuss.
Lai sasniegtu visu šo, mums ir nepieciešama šāda HTML5 un kas nav HTML5 API:
Paturiet prātā, ka ne visas pārlūkprogrammas atbalsta visas šīs tehnoloģijas šodien, bet viņi kļūst tuvu. Es tikai gribēju, lai izveidotu skaidru un pilnīgu pamācību par to, kā iet uz visu vepris un augšupielādes, ka samazinājās failu.
Gala rezultāts: mēs varam nomest failu jebkurā pārlūkā, mēs priekšskatījumu un augšupielādes norisi, un tas ir slidens pieredze.
Vilkt un nomest#
Tāpat kā forewarning, vilkt un nomest, ir zināms, ka ir mazliet par killjoy. Patiesībā, tas ir murgs, bet es neatkārtošu to, kas ir bijisminētāpirms.
Mūsu piemērs ir gatavojas ļauj jums vilkt un nomest failu jebkurā pārlūkā. Lai to panāktu, ka, mums ir nepieciešams, lai pievienotu mūsu notikumu klausītājiem uzbody ordocumentElement (t.i., saknes HTML mezgls). Uzklausot pardocumentElement, šis kodsvarētu jebkur lapā, kādocumentElement vienmēr pastāv. Jūs varat tikai klausītiesbody kad<body> elements ir saskārusies.
Lūk modelis kods mēs nepieciešams, lai attēlotu kritiena notikumam visa dokumenta:
var doc = document.documentElement; doc.ondragover = function () { this.className = 'hover';return false; }; doc.ondragend = function () { this.className = ''; returnfalse; }; doc.ondrop = function (event) { event.preventDefault && event.preventDefault(); this.className = ''; // now do something with: var files = event.dataTransfer.files; return false; };Es esmu, izmantojothover klasē, lai es varētu pārslēgt dzeramnaudu, paskaidrojot, ka lietotāju failu var samazinājās lapā.
Insidedrop notikums, mēs varam piekļūt samazinājās failus, izmantojotevent.dataTransfer.files.
Alternatīva Drag un Drop#
kaitinoši, kā es rakstu šo, Es saprotu, tas kombinācija API prasībām patlaban tikai met ar Chrome un Firefox. tā, ņemot testu noModernizr, mēs varam pārbaudīt atbalstu un nodrošināt mūsu alternatīvu:
var dndSupported = function () { var div = document.createElement('div'); return ('draggable' in div) || ('ondragstart' in div &&'ondrop' in div); }; if (!dndSupported()) { // take alternative route }Tā vietā, lai vilkšanas un nomešanas, mēs varam ievietot failu ievades elements (Es esmu devis tā irid no “augšupielādēt”), un tad, kad tā vērtība tiek mainīta, the file can be scooped in:
document.getElementById('upload').onchange = function (event){ // `this` refers to the element the event fired upon var files = this.files; };You can see the equivalent is simply thefiles property of theHTMLInputElement objekts. This will give us access to the same file as theevent.dataTransfer.files from the drop event.
Automātiski augšupielādējiet failu#
Tas ir veikls mazliet, un tas ir sāpīgi vienkāršs. Mēs izmantojam iezīme XHR2 spec: FormData. Pēc tam, kad mēs izveidojam gadījumsFormData, mēs varam pievienot objektus uz to:
var formData = new FormData(); for (var i = 0; i < files.length; i++) { formData.append('file', files[i]); } // now post a new XHR request var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.onload = function () { if (xhr.status === 200) { console.log('all done: ' + xhr.status); } else { console.log('Something went terribly wrong...'); } }; xhr.send(formData);FormDataJā, tieši tā.†
Apskatīsim pāris galvenās lietas, kas notiek ar minēto kodu.
formData.append('file', files[i]);Mēs nosūtām norādītos parametrus uz mūsu serveri, īpaši masīvs vērtībām saucfile. acīmredzot, Jūs varat zvanīt to, ko jūs vēlaties, betfile ir nosaukums jūsu serveris būs meklē, ja tā saglabā augšupielādēto failu (vai faili).
xhr.onload = function () { if (xhr.status === 200) { console.log('all done: ' + xhr.status); } else { console.log('Something went terribly wrong...'); } };Ja jūs esat iepazinušies ar XHR, Jūs pamanīsiet mums nav klausītiesonreadystatechange, tikaionload - kurš ir (spēkā) ērtība funkcija, lai jūs zināt, kadreadyState is 4 (t.i., piekrauts!). Jums joprojām pārbaudīt un atbilstoši reaģēt uz statusa kodu pieprasījumu, lai nodrošinātu tā 200 OK, nevis 500 (Iekšējā servera kļūda) or 404 (nav atrasts) vai kaut kas cits.
xhr.send(formData);Jauka Triks šeit ir tas, ka XHR ir automātiski iestatīt kodējumu norīkoto datu nodošanumultipart/form-data. Šis kodējums ļauj jūsu servera lasīt un saglabāt failus. Tas ir tāpat kā kodēšanai izmanto, kad jūs sūtīt pielikumu pa e-pastu.
Nodrošinot Atsauksmes Lietotājam#
XHR2 tagad (Flippin’ beidzot) nāk arprogress notikums. Tātad, ja jūs sūtāt vai izgūšanas lielu failu, izmantojot XHR, Jūs varat pateikt lietotāju, cik tālu gar esat.
Tas ir diezgan vienkārši,. Ja jūs vēlaties, lai izsekotu progresu XHR pieprasījuma, klausītiesprogress notikums. Viens Gotcha kas nozvejotas mani kādu laiku: Man vajadzēja sekot līdzi noaugšupielādēt, nevis lejupielāde. Lai to izdarītu pareizi, Jums ir nepieciešams, lai klausītos progresu attiecībā uzXHR augšupielāde objekts, kā tā:
xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var complete = (event.loaded / event.total * 100 | 0); progress.value = progress.innerHTML = complete; } }; xhr.onload = function () { // just in case we get stuck around 99% progress.value = progress.innerHTML = 100; };progress notikumsŅemiet vērā, ka tā vietā,xhr.onprogress, mēs izmantojamxhr.upload.onprogess. Kad šis notikums ugunsgrēki, mēs pārbaudām, ka pasākums atbalsta summas aprēķināšanas datu augšupielādēta (thelengthComputable daļa), un tad aprēķināt pabeigta.
Manā HTML, Es esmu, izmantojot<progress> elements (līdzīgs<meter> elements, bet vairāk semantiski piemērots, jo mēs esam uzrādot progresu uzdevuma) rādīt lietotājam, cik daudz no savas fails ir augšupielādēts:
<progress id ="progress" I ="0" max ="100"vērtība ="0">0</progress>
Ņemiet vērā, ka es esmu, izmantojotinnerHTML pārlūkprogrammām, kas vēl nav atbalstīta<progress>. Tad ar domuzīmi CSS radīto saturu, ganinnerHTML unvalue par progresu var būt vienādi (varbūt vairāk optimizācijas, bet es biju diezgan lepns par sevi tajā laikā!).
Un visbeidzot, Atveidojot Preview#
Kā jauku papildus, we’ll give the user a preview of what we’re uploading for them. It requires theFile API — specifically theFileReader API.
As the drag-and-drop operation (or theinput[type=file]) contains a file object, we can hand this over to theFileReader to get the contents of the file. If it’s something like an image, we can get the Base64 data and give the user a preview. Or if it’s text, we could render it in a<div>. The MIME type for the file is available as thetype property on the file object.
So let’s assume we only accept images. Šeit ir preview daļa, kas darbojas pēc faila pārlūkprogramma ir saņēmis:
var acceptedTypes = { 'image/png': true, 'image/jpeg': true, 'image/gif': true }; if (acceptedTypes[file.type] === true) { var reader = new FileReader(); reader.onload = function (event) { var image = new Image(); image.src = event.target.result; image.width = 100; // a fake resize document.body.appendChild(image); }; reader.readAsDataURL(file); }Mēs izveidotuFileReader un to failu, lai lasītu. Iepriekš minētajā piemērā, Esmu izmantojisreadAsDataURL, bet jūs varat arī izlasīt failus teksta un bināro formātu (kā vienu spec).
Kad lasītājs ir lasīt failu un dati ir pieejami, tas ugunsgrēkiload notikums, kas, savukārt, rada savu jauno tēlu.
Therezultāts no faila lasīt darbība tiek sniegtaevent.target.resultīpašums. Gadījumā, ja noreadAsDataURL, vērtība ir pa līnijāmdata:image/png;base64,ABC....
Izmantojot visus pieejamos rīkus Šķūnis#
Šis piemērs var būt nedaudz izdomāts par rakstu, ka es gribēju rakstīt. Esmu izmantojis dažādus tehnoloģijas, lai darīt kaut ko, kas ir samērā izplatīta modelis tīmeklī. Patiesībā, tas bija tāpēc, ka man bija problēmas atrast galīgu avots par augšupielādējot uzfaktisks serveris (izņemot, protams, kā es uzrakstīju šo rakstu es atradušis piemērs no muguras vēlu 2010!).
cerams, ka, Jūs redzēsiet, kā katrs mazliet tech var strādāt kopā, lai izveidotu pieteikumu, bet arī es ceru, ka jūs varat redzēt, kur tas strādā, ja nav, vai tikai dažas tehnoloģijas nav pieejams. Pārliecinieties, ka jūs atklāt funkcionalitāti. Pārliecinieties, ka jūs sniedzat atkāpšanās. Pārliecinieties, ka jums izveidot atbildīgi.
Lūk galadrag-and-drop un augšupielādēt demo lai jūs varētu spēlēt ar.
