„JQuery“ vykdymas ir „AJAX“ failo įkėlimas

Panašu, kad neaišku, ar mano problema. Turiu siųsti failą (naudojant AJAX), ir turiu gauti failo atsisiuntimo pažangą naudojant „ Nginx HttpUploadProgressModule“ . Man reikia geros šios problemos sprendimo. Aš bandžiau „plugin“ su „jquery.uploadprogress“, bet turiu perrašyti daugumą jo, kad ji veiktų visose naršyklėse ir siųsti failą naudojant AJAX.

Man reikia tik kodo, ir jis turėtų veikti visose pagrindinėse naršyklėse („Chrome“, „Safari“, „FireFox“ ir „IE“). Būtų dar geriau, jei galėčiau gauti sprendimą, kuris tvarkytų kelis failų atsisiuntimus.

Naudoju „jquery.uploadprogress“ įskiepį, kad gautumėte failo atsisiuntimo iš „NginxHttpUploadProgressModule“ pažangą. Tai yra „iframe“ programoje „Facebook“. Jis veikia „Firefox“, tačiau jis neveikia chromo / safari.

Kai atidarysiu konsolę, ją gaunu.

 Uncaught ReferenceError: progressFrame is not defined jquery.uploadprogress.js:80 

Bet kokia idėja, kaip tai išspręsti?

Taip pat norėčiau siųsti failą naudojant AJAX, kai jis bus baigtas. Kaip jį įgyvendinti?

EDIT:
Man tai reikia greitai, ir tai svarbu, todėl ketinu už 100 klausimų pateikti šį klausimą. Pirmasis asmuo, į kurį atsakysite, gaus 100 taškų.

2 redaguoti:
Jake33 padėjo man išspręsti pirmąją problemą. Pirmasis asmuo, palikęs atsakymą, kaip siųsti failą su ajax, taip pat gaus 100 taškų.

68
01 февр. Suprojektuotas kodas 01 Feb rinkinys. 2011-02-01 01:36 '11 at 1:36 2011-02-01 01:36
@ 2 atsakymai

Šiuo metu AJAX galima atsisiųsti failus. Taip, AJAX, o ne kai kurių „AJAX Wannabes“, pavyzdžiui, „swf“ ar „java“.

Šis pavyzdys gali padėti jums: https://webblocks.nl/tests/ajax/file-drag-drop.html

(Jame taip pat yra vilkimo / nuleidimo sąsaja, tačiau tai lengvai ignoruojama.)

Iš esmės tai atsitinka:

 <input id="files" type="file" /> <script> document.getElementById('files').addEventListener('change', function(e) { var file = this.files[0]; var xhr = new XMLHttpRequest(); (xhr.upload || xhr).addEventListener('progress', function(e) { var done = e.position || e.loaded var total = e.totalSize || e.total; console.log('xhr progress: ' + Math.round(done/total*100) + '%'); }); xhr.addEventListener('load', function(e) { console.log('xhr upload complete', e, this.responseText); }); xhr.open('post', '/URL-HERE', true); xhr.send(file); }); </script> 

(demo: http://jsfiddle.net/rudiedirkx/jzxmro8r/ )

Taigi iš esmės, kas tai yra =)

 xhr.send(file); 

Kai file Blob : http://www.w3.org/TR/FileAPI/

Kitas būdas (geriau IMO) yra naudoti „ FormData . Tai leidžia jums 1) pavadinti failą kaip formą ir 2) siųsti kitą medžiagą (taip pat ir failus) kaip ir formą.

 var fd = new FormData; fd.append('photo1', file); fd.append('photo2', file2); fd.append('other_data', 'foo bar'); xhr.send(fd); 

FormData daro serverio kodą švaresnį ir atvirkštingesnį (kadangi dabar užklausa turi tą patį formatą kaip ir įprastos formos).

Visa tai nėra eksperimentinė, bet labai moderni. „Chrome 8+“ ir „Firefox 4+“ žino, ką daryti, bet nežinau apie kitus.

Štai kaip aš apdorojau užklausą (1 paveikslėlis per užklausą) PHP:

 if ( isset($_FILES['file']) ) { $filename = basename($_FILES['file']['name']); $error = true; // Only upload if on my home win dev machine if ( isset($_SERVER['WINDIR']) ) { $path = 'uploads/'.$filename; $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path); } $rsp = array( 'error' => $error, // Used in JS 'filename' => $filename, 'filepath' => '/tests/uploads/' . $filename, // Web accessible ); echo json_encode($rsp); exit; } 
197
09 февр. Atsakymą pateikė Rudie 09 vasaris. 2011-02-09 13:45 „11 at 13:45 pm 2011-02-09 13:45

Štai keletas AJAX failų įkėlimo parinkčių:

border=0

UPDATE :. Čia yra kelių failų įkėlimo jQuery įskiepis.

15
06 февр. atsakymas pateikiamas jmort253 06 Feb. 2011-02-06 13:37 '11, 13:37 pm 2011-02-06 13:37

Kiti klausimai apie „ žymes arba Užduoti klausimą