AJAX和文件上傳

我已經做了一堆谷歌搜索到我在哪裏，但最後一點似乎逃避我。有人知道爲什麼reader.result數據是空白的？我玩過不同的場景，有時候ajax文章不包含reader.result（因爲我已經移動了，所以代碼不在這裏）。我想我需要對它進行字符串化，一旦我得到實際的reader.result可以通過reader.onload函數範圍之外的我自己的變量。AJAX和文件上傳

<form id="UploadForm"><input id="FileUpload" type="file"></form> 

$('#FileUpload').on("change",function(e) { 
var data = {}; 
var StepID = $(this).data("StepID"); 
var Step = $(".InstructionPhotos[data-id=" + StepID + "]"); 
var reader = new FileReader(); 
var s; 

reader.onload = function (e) { 
     $("<img class='image uploading' src='" + e.target.result + "'>").appendTo($("#Slides")); 
     s = e.target.result; 

} 
reader.readAsDataURL(e.target.files[0]); 

console.log(reader.result); //This is blank 
console.log (s); //This is undefined 

data['RecipeID'] = RecipeID; 
data['File'] = $(".uploading").attr("src"); 
data['Filename'] = e.target.files[0].name; 
data['StepID' ] = $(this).data("StepID"); 
data['page'] = 'recipe_editor'; 
data['ajax'] = true; 

$.ajax({ 
    type: "POST", 
    url: "index.php", 
    data: data, 
    dataType: "json" 
}); 
});

來源

2015-07-20 Bodi

您的代碼未顯示將結果傳遞到ajax文章。但是我懷疑你遇到的問題是在'reader.result'完成讀取文件之前你正在進行AJAX調用。見https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result – DAC84

從the MDN documentation：

此屬性纔有效的讀操作完成後，

你打電話readAsDataURL後立即閱讀它。您並未等待load事件觸發。

來源

2015-07-20 16:36:02 Quentin

謝謝！我在onload函數中移動了我的AJAX請求，它工作。 – Bodi

AJAX和文件上傳

回答

相關問題