Question

我的jQuery AJAX代码运行顺利，直到我将以下文件字段添加到其中：

 'profile_pic'      : $('input[type=file]')[0].files[0])

所有其他字段都是通过AJAX调用正在接收和处理的文本字段。但是，我必须包含一些代码来处理处理PHP文件上传的文件（大小，类型）。

现在单击表单上的提交按钮，整个页面重定向到PHP文件（YES捕获所有数据并将其提交到数据库），而不是像之前那样通过AJAX执行，而不重定向整个页面。我能做错什么？是否需要添加一个额外的参数来进一步防止这种重定向？

jQuery AJAX调用：

var formData = {
        'name'              : $('input[name=name]').val(),
        'email'             : $('input[name=email]').val(),
        'superheroAlias'    : $('input[name=superheroAlias]').val(),
        'profile_pic'       : $('input[type=file]')[0].files[0])
    };

    // process the form
    $.ajax({
        type        : 'POST', 
        url         : 'process.php', 
        data        : formData, 
        dataType    : 'json', 
        processData : false, 
        contentType : false, 
        encode      : true
    })

处理文件上传的代码：

$target_dir = "image_uploads/";
    $target_file = $target_dir .rand(1,999). basename(str_replace(" ","",$_FILES["profile_pic"]["name"]));
    $uploadOk = 1;
    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
    // Check if image file is an actual image or fake image
    if(isset($_POST["submit"])) {
        $check = getimagesize($_FILES["profile_pic"]["tmp_name"]);
        if($check !== false) {
            $uploadOk = 1;
        } else {
            $uploadOk = 0;
        }
    }
    // Check if file already exists
    if (file_exists($target_file)) {
        $uploadOk = 0;
    }
    // Check file size
    if ($_FILES["profile_pic"]["size"] > 500000) {
        $uploadOk = 0;
    }
    // Allow certain file formats
    if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
    && $imageFileType != "gif" ) {
        $uploadOk = 0;
    }
    // Check if $uploadOk is set to 0 by an error
    if ($uploadOk == 0) {
    // if everything is ok, try to upload file
    } else {
        move_uploaded_file($_FILES["profile_pic"]["tmp_name"], $target_file);
    }

Answer 1

实际上，为了将表单数据发送到后端，您不需要创建这样的对象。在这里，您将分别添加每个输入值。这不是一个好方法。您知道，如果表单中有100个字段，代码将如何显示？

是的，您可以使用FormData获取表单中的所有输入值。所以改变你的代码如下：

var formData = new FormData(document.getElementById('#your-form-id'));

// process the form
$.ajax({
    type        : 'POST', 
    url         : 'process.php', 
    data        : formData, 
    dataType    : 'json', 
    processData : false, 
    contentType : false, 
    encode      : true
})

使用文件Upload防止jQuery AJAX调用的页面重定向

1 个答案: