AJAX ile dosya yükleme, HTML5 ve jQuery kullanarak

SORU

23 EKİM 2010, CUMARTESİ

AJAX ile dosya yükleme, HTML5 ve jQuery kullanarak

Kuşkusuz, benzer sorular etrafında ÇOK yalan var. Ama hiçbiri tam olarak ihtiyaçlarını karşılamak gibi görünüyor. Ne arıyorum:

Tek parça bir bütün veri formu, yükleyintekdosya
Codeıgniter dosya upload kütüphane ile çalışmak

Buraya kadar her şey yolunda. Veri ihtiyacım var benim veritabanında alır. İyi iyi. Ama aynı zamanda bir AJAX post ile formu göndermek istiyorum:

Yerli HTML5 API kullanarak, ya da bir iFrame çözüm flash Dosyası değil
Düşük düzey tercihen arayüz .ajax jQuery yöntemi

Bence bunu hayal nasıl bu yapmak için otomatik yükleme dosyası ne zaman bir alanın değerini değiştirir kullanarak saf javascript, ama seve hepsini bir dalışta için üzerinden bir WordPress kullanmak. Tüm dosya nesne geçmek istiyorum mümkün olduğunca sorgu dizeleri ile yapmak değil düşünüyorum, ama bu noktada ne yapmam biraz kayboldum. Bir tek boynuzlu at kovalayan ben miyim?

Teşekkürler verebilir herhangi bir yardım için çok fazla.

CEVAP

24 EKİM 2010, Pazar

Çok zor değil. Öncelikle FileReader Interface bir göz atın.

Bu form, teslim süreci yakalamak, ve

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = shipOff;
//reader.onloadstart = ...
//reader.onprogress = ... <-- Allows you to update a progress bar.
//reader.onabort = ...
//reader.onerror = ...
//reader.onloadend = ...


function shipOff(event) {
    var result = event.target.result;
    var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'
    $.post('/myscript.php', { data: result, name: fileName }, continueSubmission);
}

Sonra, sunucu tarafında (yani myscript.php):

$data = $_POST['data'];
$fileName = $_POST['fileName'];
$serverFile = time().$fileName;
$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $serverFile );
echo json_encode($returnData);

Ya da bunun gibi bir şey. Ben yanlış olabilir (ve eğer ben, lütfen düzeltin beni), ama bu gerektiği deposu dosya gibi bir şey gibi 1287916771myPicture.jpg /uploads/ sunucu ve yanıt ile bir JSON değişken (continueSubmission() fonksiyon) içeren dosya adını server.

fwrite() jQuery.post() bak.

Yukarıdaki sayfada diğer ihtiyaçlarınız (örneğin resimler, videolar, vb) için readAsBinaryString(), ** 16 yaşında, nasıl kullanılacağı ve readAsArrayBuffer() detaylar.

Bunu Paylaş: