Question

我一直在处理您上传图片和评论的表单。我在PHP中使用它，但现在我想在AJAX中使用它。我想在AJAX中执行此操作的原因是因为用户必须在上载失败时再次键入所有文本（由于以下条件：字段不能为空或图像的宽高比关闭）。无论我做什么，我都无法在AJAX中完成。

我尝试在FormData中使用$ .post和$ .ajax。我也查了很多指南，以及其他关于此的帖子，但似乎没有什么对我有用。

您将在下面找到HTML表单，jQuery AJAX调用以及AJAX调用所调用的PHP页面中的PHP代码。

HTML表格

<form action="uploadpost.php" id="postForm" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="postImage">Upload image</label>
            <input type="file" id="fileToUpload" name="postImage" class="form-control">
        </div>

        <div class="form-group">
            <label for="description">Write a caption</label>
            <textarea name="description" id="postMessage" cols="30" rows="5" class="form-control"></textarea>
        </div>
        <input type="submit" id="postSubmit" value="Create post" name="upload_image" class="btn btn-primary">
    </form>

AJAX电话

<script type="text/javascript"> 
$(document).ready(function(){

    $("#postSubmit").on("click", function(e){
        var formData = new FormData($("#postForm"));
        //var message = $("#postMessage").val();

        $.ajax({
            url: "ajax/postUpload.php", 
            type: "POST",             
            data: formData,             
            contentType: "multipart/form-data",       
            cache: false,             
            processData:false,        
            success: function(data)  
            {
                console.log(data);
            }
        });
        e.preventDefault();
    });
});

ajax / postUpload.php中的PHP代码

<?php
include_once("../classes/Post.class.php");
$post = new Post();

var_dump($_FILES);
if(!empty($_POST)){

$file_tmp_name = $_FILES['postImage']['tmp_name'];


$result = $post->createPost($file_tmp_name);
if($result){
    $uploadCheck['check'] = "success";
}else{
    $uploadCheck['check'] = "error";    
}
header('Content-Type: application/json');
echo json_encode($uploadCheck);
}

?>

来自console.log(data)的ajax调用返回

的输出

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=0)</i>
<i><font color='#888a85'>empty</font></i>
</pre>

问题在于我无法将图像或消息发送到该PHP页面，这使我不能createPost()。

Answer 1

var formData = new FormData($("#postForm"));

FormData的参数应该是DOM表单对象，而不是jQuery对象。

new FormData($("#postForm")[0])

手动设置内容类型：

contentType：“multipart / form-data”，

...将无法在其中设置边界数据。说：

contentType: false,

...以便jQuery根本不会尝试设置它，而XHR对象将从FormData对象生成它。

使用AJAX

1 个答案: