2013-03-25 8 views
8

aracılığıyla FormData ile Blob'u deftere nakil:Bu soru defalarca soruldu gördüm ama kadar ben çalışırken, hala görüyorum sonuç jQuery.ajax

nasıl veri oluşturmak için bir Blob'u ekleyebilirsiniz ve jquery ile POST?

var reader = FileReader(); 
reader.readAsBinaryString(f); 
reader.onload = function() { 
    var slice = reader.result.slice(0,100, {type: "application/octet-stream"}); 

    var formdata = new FormData(); 
    formdata.append("blobData", slice); // I have verified via console.log(slice) that this has data 
    formdata.append("blobName", "Photo"); 

    send(formdata); 
} 

function send(data) { 
    $.ajax({ 
     url: "/upload", 
     type: "POST", 
     data: data,  
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
} 

olmayan tüm damla anahtar/değerler istek içindedir ve hatta BLOB kilit ... ama damla verileri. Ben yerine Chrome'un Firefox'u yayınlayabileceğiniz zaman

Missing data

İlginçtir, ben orada verilerin biraz olsun .. ama çok (bu da 7 var ... verilerin en fazla 2 MB değerinde olmalıdır bayt)

enter image description here

cevap

5

Geçenlerde tam bu sorunla karşılaştı ve çözüm var.

Temel sorun, reader.result öğesinin için readAsBinaryString'a geçirilmiş olmasıdır, bir blob değil bir dizedir. Sesler gerçekten açık ama aynı zamanda bir blob ile çalıştığımı farz ettim. String ve Blob nesnelerinin her ikisi de bir dilim yöntemine sahip olduğu için, slice değişkeni, ikili veriye benzeyen verilerle ayarlanırken, hala sadece bir dizedir. String.slice() yöntemi, Blob.slice() yöntemiyle tam olarak aynı şekilde çalışır ve üçüncü parametreyi yoksayar, bu yüzden gerçekten neler olduğunu fark etmiyorsunuz.

FormData spec'a göre Blob veya File nesnesi olmayan herhangi bir değer, bir dizeye dönüştürülür. slice dizesinin ilk ASCII olmayan karakterde kesildiğini görüyorum (yalnızca tam nedenini tahmin ediyorum, ancak önemli nokta, formdata eklendiğinde dizenin kesinlikle kesilmesidir).

Eriyik önce bir damla halinde reader.result dönüştürülmesidir:

reader.onload = function() { 
    var blob = new Blob([reader.result]), 
     slice = blob.slice(0,100, {type: "application/octet-stream"}); 

    var formdata = new FormData(); 
    formdata.append("blobData", slice); 
    formdata.append("blobName", "Photo"); 

    send(formdata); 
} 

(dizi Kabarcık yapıcı bir gerekliliktir). Blob.slice() metodu Kabarcık nesnesi geri döndürür ve dizisi, dönüştürme ile karıştırılmış olmadan formdata eklenmiş olabilir çünkü

Şimdi slice, bir damla olup.

+0

Güzel iş, dedektif. –

İlgili konular