AJAX和文件上传

时间:2015-07-20 16:28:12

标签: jquery ajax filereader

我已经做了一堆谷歌搜索到达我的位置,但最后一点点似乎没有我。有人知道为什么reader.result数据是空白的吗?我已经玩过不同的场景,有时候ajax帖子也没有包含reader.result(这个代码不存在,因为我已经开始了)。我认为一旦得到实际的reader,就需要对它进行字符串化。结果可以在reader.onload函数范围之外传递给我自己的变量。

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

1 个答案:

答案 0 :(得分:2)

来自the MDN documentation

  

此属性仅在读取操作完成后有效,

您在致电readAsDataURL后立即阅读。您不是在等待load事件发生。