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ş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Maya Learning Channel

    Maya Learnin

    23 HAZİRAN 2010
  • TantalizingTrance

    TantalizingT

    15 ŞUBAT 2009
  • thetrollska

    thetrollska

    2 EKİM 2009