Question

我已经尝试了几种变体（基于文章和其他SO论坛）来实现这一点，我已经将其缩小到当我尝试将表单数据发送到PHP时数据丢失的事实脚本。当我回显$ _FILES [“file”] [“name”]时，它是空的。

我已经测试过，我的ajax和php脚本已连接，因为我可以返回一些数据，而不是任何表单数据。这显然导致文件无法上传。

我目前的代码是参考这个论坛（lee8oi的答案）： jQuery Ajax File Upload 我开始了一个新的论坛，因为这个问题是在6年前提出来的。

HTML：

<form id="signUpForm" name="signUpForm"  action="../functions/newUser.php" method="post">
    <input type="file" class="su_photo" name="file" id="user-photo">
    <input type="submit" id="sign-up" type="button" class="btn btn-primary btn-sm pull-right" value="Get Started">
</form>

JS：

  $('#signUpForm').on('submit',function(){
        var fd = new FormData( $('#signUpForm') );
        fd.append("label", "WEBUPLOAD");
        $.ajax({
          url: "../../functions/newUser.php",
          type: "POST",
          data: fd,
          processData: false,  // tell jQuery not to process the data
          contentType: false   // tell jQuery not to set contentType
        }).done(function( data ) {
            console.log("PHP Output:");
            console.log( data );
        });
        return false;
    });

PHP：

   if ($_POST["label"]) {
      $label = $_POST["label"];
    }
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file"]["name"]);
    $extension = end($temp);
    if ((($_FILES["file"]["type"] == "image/gif")
    || ($_FILES["file"]["type"] == "image/jpeg")
    || ($_FILES["file"]["type"] == "image/jpg")
    || ($_FILES["file"]["type"] == "image/pjpeg")
    || ($_FILES["file"]["type"] == "image/x-png")
    || ($_FILES["file"]["type"] == "image/png"))
    && ($_FILES["file"]["size"] < 200000)
    && in_array($extension, $allowedExts)) {
        if ($_FILES["file"]["error"] > 0) {
            echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
        } else {
            $filename = $label.$_FILES["file"]["name"];
            echo "Upload: " . $_FILES["file"]["name"] . "<br>";
            echo "Type: " . $_FILES["file"]["type"] . "<br>";
            echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
            echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

            if (file_exists("uploads/" . $filename)) {
                echo $filename . " already exists. ";
            } else {
                move_uploaded_file($_FILES["file"]["tmp_name"],
                "uploads/" . $filename);
                echo "Stored in: " . "uploads/" . $filename;
            }
        }
    } else {
        echo $_FILES["file"]["name"];
    }

Answer 1

我认为您只需要更改以下行

var fd = new FormData( $('#signUpForm') );

到

var fd = new FormData( $('#signUpForm')[0] );

或

var fd = new FormData(this);

FormData的构造函数需要本机表单元素，而不是jQuery对象。因此document.getElementById('signUpForm')，$('#signUpForm')[0]和this都可以。

这answer提供了进一步的解释。

使用Ajax上传文件

1 个答案: