使用AJAX和PHP上传文件映像

Question

我正在尝试创建一个上传文档，上传个人资料图片。我无法从changePicture表单中捕获数据，该表单只有图像输入和提交。我从来没有使用过FormData对象，所以我仍在学习这个。任何指导都会有用。

看我的HTML

<form id="changePicture" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="name">Update Your Profile Picture</label>
            <input type="file" id="profilePic" class="form-control" name="profilePic">
            <input type="hidden" value="<?php echo $id; ?>" name="id">
        </div>
        <button type="submit" id="updateProfileBtn" class="btn btn-success float-right">Upload Image</button>
 </form>

这是我的AJAX代码：

function updateProfilePic(){
$("#changePicture").on("submit", function(e) {
    e.preventDefault();

    $("#spinner").show();

    setTimeout(function(){
        $.ajax({
           url: "../ajax/admin/updateProfilePic.php",
           type: "POST",
           data: new FormData(this),   
           cache: false,
           contentType: false,
           processData: false,
           success: function(result){
               $("#spinner").hide();
               $("#changePicture").append(result);

               setTimeout(function(){
                $("#changePicture").slideDown();
               }, 1500);
           }
        });
    }, 3000);
});    
}

此时的PHP文件只回显“正在工作”以查看它是否可以访问页面。但是，当我尝试通过变量找到文件时，没有发送任何内容并返回undefined index。

Answer 1

这将是未定义的，因为它在ajax的范围内

尝试：

me = this; 

$.ajax({ 
url: "../ajax/admin/updateProfilePic.php", 
type: "POST", 
data: new FormData(me),
...

对我来说，当使用ajax时，我总是喜欢对图像进行base64编码并将其作为JSON传递给PHP，但我想这是个人喜好......

Answer 2

为什么要将AJAX调用包装在一个

setTimeout(function() {..})

?

通过这样做，你不能简单地写new FormData(this)，因为this上下文不是指你正在寻找的形式。

尝试在没有超时的情况下执行代码，或尝试将表单数据存储在全局变量中

编辑：添加示例：

var myFormData;

function updateProfilePic(){
$("#changePicture").on("submit", function(e) {
    e.preventDefault();

    $("#spinner").show();
    myFormData = new FormData(this);

    setTimeout(function(){
       $.ajax({
           url: "../ajax/admin/updateProfilePic.php",
           type: "POST",
           data: myFormData, 
           ....