Çok parçalı/gönderme jQuery ile formdata.ajax

SORU

22 Mart 2011, Salı

Çok parçalı/gönderme jQuery ile formdata.ajax

Bir sorun, bir sunucu tabanlı PHP-script jQuery ajax işlevini kullanarak bir dosya göndermek var. Olası Listesi Dosyası $('#fileinput').attr('files') ama nasıl sunucuya bu Verileri göndermek mümkün değil. Sonuçta elde edilen dizinin ($_POST) sunucu taraflı php-komut dosyası kullanarak giriş dosyası 0 (NULL).

Mümkün (şu ana kadar herhangi bir WordPress kullanmak çözüm bulamadım ama, sadece kod (http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html)Prototye)biliyorum.

Bu oldukça yeni gibi görünüyor, lütfen dosya upload kesinlikle işe yarıyor çünkü XHR/Ajax ile mümkün olacağını söz etmeyin.

İşlevsellik Safari 5, FF ve Chrome güzel olurdu ihtiyacım var ama önemli değil.

Şu an için benim kod:

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

CEVAP

12 Mayıs 2011, PERŞEMBE

5/Safari Firefox 4, kolay FormData sınıfı kullanmaya başladı:

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-' i, file);
});

Şimdi FormData bir nesne var, XMLHttpRequest ile birlikte gönderilen hazır.

jQuery.ajax({
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

Sınır dize eksik olacak contentType 16 ** dil eklentisi sizin için Content-Type bir başlık eklemek için zorlama seçeneği, aksi takdirde ayarlamak şart. Ayrıca, yanlış processData bayrak bırakmanız gerekir, aksi takdirde dil eklentisi başarısız olacak bir dize, içine FormData dönüştürmek için çalışacağız.

Şimdi PHP kullanarak dosya almak:

$_FILES['file-0']

Her dosya ile, bu durumda, sayıları artırır dosya girişi multiple öznitelik belirtilen sürece (tek bir dosya, file-0.)

Eski tarayıcılar için FormData emulation kullanarak

var opts = {
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
};
if(data.fake) {
    // Make sure no text encoding stuff is done by xhr
    opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; }
    opts.contentType = "multipart/form-data; boundary=" data.boundary;
    opts.data = data.toString();
}
jQuery.ajax(opts);

Mevcut bir formdan FormData oluşturun

Dosyaları el ile dolaşmak yerine bu, FormData nesne de bir form nesnesinin içeriğini oluşturulabilir:

var data = new FormData(jQuery('form')[0]);

Bir sayaç yerine PHP yerel bir dizi kullanın

Sadece isim elemanları aynı dosya ve parantez içinde: adı end

jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file[]', file);
});

$_FILES['file'] sonra bir dizi her yüklenen dosya için dosya yükleme alanları içeren olacak. Aslında daha basit üzerinde yineleme gibi benim ilk çözüm bu tavsiye ederim.

Bunu Paylaş: