PHP中通过Ajax上传图片[最简单的方式]答案

【问题标题】：Image upload via Ajax in PHP[simplest way]PHP中通过Ajax上传图片[最简单的方式]
【发布时间】：2018-03-01 07:53:11
【问题描述】：

我在 stackOverflow 中研究了很多答案，但还没有找到从表单上传图像的最简单方法。我正在尝试找出一种使用 Ajax 上传图像的方法。尽管表单、PHP 和 Ajax 编码非常庞大，但我还是为您提供了重要的部分。当我单击提交按钮时，会显示错误消息，即undefined index。

HTML

<form method="post" enctype="multipart/form-data">
<tr>
    <th>Image</th>
    <td><input type="file" name="image" id="img"></td>
  </tr>
</form>

Ajax

$(document).on('click','#sub_prod',function(event){
        event.preventDefault();
        $.ajax({
            url:"product_add_back.php",
            method:"post",
            data:$('form').serialize(),
            dataType:"html",
            success:function(strMsg){
                    $("#prod_add").html(strMsg).show().fadeOut(3000);

                }

            })

})

PHP

$image_name=$_FILES["image"]["name"];
echo $image_name;
die();

【问题讨论】：

Check this answer
serialize 不包括文件。检查这个：jQuery Ajax File Upload
@C2486 我的表单中有数据，尝试使用您建议的答案，但它阻止了表单字段的提交。
@Justinas，谢谢，尝试你的方式。 formData，如果您能在答案中给出解决方案，将不胜感激。
您可以从序列化数据中循环添加表单字段。

标签： php jquery ajax

【解决方案1】：

$().serialize()不会包含$_FILES的内容，所以需要使用FormData object

$(document).on('click','#sub_prod',function(event){
    event.preventDefault();
    var formdata = new FormData($('form')[0]);

    $.ajax({
        url: "product_add_back.php",
        method: "post",

        data: formData,
        processData: false,
        contentType: false,

        success: function(strMsg){}
    });
});

请注意您传递了 3 个参数：data: formData、processData: false 和 contentType: false

【讨论】：

我可以理解FormData 构造函数是随form 一起提供的，它会创建文档中提到的对象，但是为什么我们还要使用[0] 呢？我尝试删除它，但没有数据提交到数据库中（抛出错误）。请告诉我为什么我们使用[0]？
@Don'tDownvoteMe $('form') 将返回不适合 FormData 解析器的 jQuery 对象。您需要实际的 DOM 元素，它位于 $('form') 的 0 索引中，因此 $('form')[0] 获取实际的 DOM 元素而不是 jQuery 包装器
我们使用$('form')[0]定位哪个DOM元素？
@Don'tDownvoteMe 您在查询中选择的那个 - <form>