javascript - 通过 Ajax 将图像上传到 PHP

Question

我试图根据这个问题在我的应用程序中创建一个图像上传字段: Send FormData and String Data Together Through JQuery AJAX?
和本教程: http://www.formget.com/ajax-image-upload-php/
我听说这很难，这就是我尝试过的。

HTML

<form method="POST" action="" id="logo_upload">
    <input type="file" name="logo_location" id="logo_location" enctype="multipart/form-data">
    <button type="submit" name="file_test" id="file_test">Test Upload</button>
</form>

JQuery

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    var file_data = $('#logo_location')[0].files[0];
    formData.append("file", file_data[0]);

    $.ajax({
        url: "../../../controllers/ajax_controller.php?action=image_upload",
        type: 'POST',
        data: formData ,
        cache: false,
        contentType: false,
        processData: false,
        id: id
    });
});

PHP

var_dump($_FILES);
var_dump($_POST);

如您所见，我还没有完成上传方面的工作。

结果

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

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

我看不出我做错了什么，我得到了一个结果，所以它到达了正确的地方，有人能指出我正确的方向吗？

编辑:在表单中添加了#logo_upload var file_data = $('#logo_location')[0].files[0];
编辑:用 formData 变量替换数据
编辑:添加属性:enctype="multipart/form-data"
新结果:

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=1)</i>
  'file' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'undefined'</font> <i>(length=9)</i>
</pre>

Answer 1

您要将 file_data[0] 附加到 formdata 对象，file_data 是文件而不是数组，请使用 file_data。

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    var file_data = $('#logo_location')[0].files[0];
    formData.append("file", file_data);

    $.ajax({
        url: "../../../controllers/ajax_controller.php?action=image_upload",
        type: 'POST',
        data: formData ,
        contentType: false,
        processData: false,
        success: function(data){
            console.log(data);
        }
    });
});

您还可以使用相关表单实例化表单数据对象，而不是执行附加操作。

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
    ...