Question

我无法通过AJAX上传图片文件。

网络：

<div>
    <form id="birdi_image_form">
        <input type="file" name="birdi_image" id="birdi_image" ></input>
    </form>

    <input type="text" name="species"></input>
    <textarea name="comments"></textarea>
</div>
<div id="debug"></div>

<script type="text/javascript">

jQuery(function($){
    $('#birdi_image').change(function(){
        var ima = new FormData($('#birdi_image_form')[0]);

        $.ajax({
            url:"/bird/bird_scripts/fu.php",
            type:"post",
            data: ima,
            processData: false,
            dataType:"text",
            success:function(data, textStatus, jqXHR) {
                $('#debug').text(data);
            }
        });
    });
});

</script>

/bird/bird_scripts/fu.php：

<?php

$imagedir = '/images';
$tmpfname = tempnam($imagedir, "b_");

echo var_dump($_POST);

if (move_uploaded_file($_FILES['birdi_image']['tmp_name'], $tmpfname)) {
  echo "File is valid, and was successfully uploaded.\n";
} else {
   echo "Upload failed";
}

?>

从在线浏览我希望在我的$_FILES变量中找到内容，但这是空的。如示例中那样将$_POST var转储到屏幕上给出了以下内容。 $_POST['birdi_image']给了我NULL。

array（68）{[“------ WebKitFormBoundaryYCAoI8shwgBavjJP Content-Disposition：_form-data; _name“] =＆gt; string（339）”“birdi_image”; filename =“test.jpg”内容类型：image /jpeg JFIFdd ExifMM bj（1r2 i B@'B @'Adobe Photoshop CS2 Windows2008：06：24 11：11：48 b g“ [“？o （ ci \ R Mꟑ ）T z ”] =＆gt; string（82）“ FZߠI ��/��v��E~��[,�Y �s��1l�G��-��߿�enu'=�v�z��=?Ҳ��" ["�{��<o��ӗ�M��ysnʨo87~;l��۔�"]=> string(172) "�<��t�2~��O�S ��t��㵺C�}E��}��I�d]c��y}#��C,�Z��־��V��ynʿ��?�g�*��o��ٌ�.}�y��}��z��w^�]�m�u��z>�37�_C긵��K�Y-{��뺷��M��ul��Y�" ["c�yhHp��"]=> string(152) "��[-��1�]��|��۽Q�\�e��o�~��g��u�.��A��t�]�3�W�ד��b��}>��%��K��Ѳ�3��zX��qZ��}u��sc� ��N� ^-w�7��\r� ��c��=?՗δX�j" ["C�uw��-��"]=> string(57) "��m��w��ѩ��k��r��m�t�62rIk��m�ߗV��}" ["�"]=> string(384) "!�<��B��6*�c��劷Q��uF*��U��ď,� {ÝRE％Q5.IE Ñ Ο ̿4~R ...............上传失败。

我之前使用完整的表单提交上传了文件。这是我第一次尝试使用AJAX。看起来数据正在进入服务器，但我似乎无法从服务器端了解它。正如您在代码中看到的那样，我期望$_FILES['birdi_image']存在，但事实并非如此。我做错了什么？

由于

Answer 1

你必须将内容类型设置为false，否则jQuery会为你设置一个（错误的）

    $.ajax({
        url:"/bird/bird_scripts/fu.php",
        type:"post",
        data: ima,
        processData: false,
        contentType: false,
        dataType:"text",
        success:function(data, textStatus, jqXHR) {
            $('#debug').text(data);
        }
    });

Answer 2

我也在努力解决这个问题 - 它并不像应该的那样容易。我终于找到了一个做得对的人，并研究了他的代码。

Ravi Kusuma's jQuery File Upload

最后，因为Kusuma写了一个插件，我只是使用了他的代码/插件。为什么重新发明轮子？他已经解决了所有问题，直到发送额外的数据和上传的文件。

无法从FormData获取服务器上的数据

2 个答案: