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

我在表单中看不到logo_upload id。
上传文件时enctype =＆＃34; multipart / form-data＆＃34;必须是表格属性。
ajax中的数据参数获取变量，即未定义。再看一下您的参考链接。

希望这会对你有所帮助

Answer 2

您将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({
    ...

Answer 3

您在这里传递了错误的变量，并且您没有在ajax请求中定义成功：

$('#logo_upload').submit(function(e) {
e.preventDefault();
var formData = new FormData($('#your_form_id')[0]);

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

通过Ajax将图像上传到PHP

3 个答案: