jQuery Yükleme devam ediyor ve AJAX dosya yükleme

SORU

31 Ocak 2011, PAZARTESİ

jQuery Yükleme devam ediyor ve AJAX dosya yükleme

Açıkça sorunumu bildirdim değil gibi görünüyor. Bir dosya göndermem gerekiyor (AJAX kullanarak) ve dosya Nginx HttpUploadProgressModule kullanarak karşıya yükleme ilerlemesini lazım. Bu sorun için iyi bir çözüm gerekiyor. Jquery ile denedim.eklenti uploadprogress, ama çok bu tüm tarayıcılarda işe almak için yeniden yazmak ve dosya göndermek için kendime olan AJAX kullanarak buluyorum.

Tek ihtiyacım bunu yapmak için kod ve tüm büyük tarayıcılar (Chrome, Safari, FireFox ve IE çalışmak gerekiyor. Eğer birden fazla dosya yüklenenler idare edecek bir çözüm bulabilirsem daha da iyi olur.

jquery.uploadprogress plugin NginxHttpUploadProgressModule bir dosya yükleme ilerleme elde etmek için kullanıyorum. Bunun içinde facebook uygulaması için bir iframe. Firefox çalışıyor ama chrome/safari başarısız olur.

Açtığımda da bu olsun konsol.

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

Bunu düzeltmek istiyorum nasıl bir fikriniz var mı?

Bu bittikten sonra da dosyayı AJAX kullanarak göndermek istiyorum. Bunu nasıl uygular ki?

DÜZENLEME:

EDİT 2:

CEVAP

9 ŞUBAT 2011, ÇARŞAMBA

Dosyaları yüklemek aslında AJAX ile mümkün bu gün. Evet, AJAX yüklenen ya da java gibi boktan AJAX özentilerinin değil.

Size yardımcı olabilir bu örnek: http://js1.hotblocks.nl/tests/ajax/file-drag-drop.html

(Ayrıca sürükle/bırak arayüzü içerir, ancak kolayca görmezden geldi.)

İş bu noktaya geldiğinde temelde bu

<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/)

Bu=) gelse ne yani temelde

xhr.send(file);

file Blobsattığınız nerede: http://www.w3.org/TR/FileAPI/

(IMO) başka bir yolu FormData kullanmaktır. Bu sizin için sağlar 1) Bir dosya, form ve 2) adı (dosyaları da), benzer bir form gönderin.

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

FormData sunucu kodu daha temiz ve daha uyumlu isteği şimdi normal form olarak aynı biçime sahip beri) yapar.

Hepsini değil deneysel, ama çok modern. Ve Firefox 4 Chrome 8 ne yapacağımı, ama diğerleri hakkında bilgim yok.

Bu istek, istek başına 1 Resim) PHP nasıl idare ettiğimi

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;
}

Bunu Paylaş: