使用ajax上传文件答案

【问题标题】：Uploading a file with ajax使用ajax上传文件
【发布时间】：2017-09-20 13:11:45
【问题描述】：

我一直在寻找我能在这里找到的所有答案，但似乎没有一个对我有用，不知道为什么。

我正在尝试使用 ajax 上传文件，但该文件永远不会到达 PHP 中的 $_FILES 数组，我只将它放到 $_POST 数组中，但它不会让我获得文件的名称或大小文件。我已经尝试了这里回答的每一个解决方案，但似乎没有一个能解决我的问题，我不知道为什么，我认为有些东西我没有看到。如果有人可以帮助我，那就太好了。

HTML 代码

<form name='formuploadgraphic'>
     <input type='file' name='archivo1' id='archivo1' onchange='subegraphic()'>
</form>

JS/AJAX 代码

function subegraphic()
{
    var formData = new FormData();
    formData.append("archivo1", $("#formuploadgraphic")[0]);

    $.ajax({
        url: "subegraphic.php",
        type: "post",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        async: true
    })
     .done(
         function(data)
         {
             alert(data);
         }
     );
}

PHP 代码

<?php
    $upload_folder ='graphics';
    $nombre_archivo = $_FILES['archivo1']['name'];
    $tipo_archivo = $_FILES['archivo1']['type'];
    $tamano_archivo = $_FILES['archivo1']['size'];
    $tmp_archivo = $_FILES['archivo1']['tmp_name'];
    $extension = pathinfo($_FILES['archivo1']['name'], PATHINFO_EXTENSION);
    $archivador = $upload_folder . '/' . $nombre_archivo;
    echo $nombre_archivo;
?>

如果我使用该代码，这是来自 php 的回复：

"
通知：未定义索引：C:\xampp\htdocs\airpost\home\subgraphic.php 中 4 行中的存档 1 b>

通知：未定义索引：archivo1 在 C:\xampp\htdocs\airpost\home\subgraphic.php 行 5

通知：未定义索引：C:\xampp\htdocs\airpost\home\subgraphic.php 中的archivo1 在第 6 行

通知：未定义索引：C:\xampp\htdocs\airpost\home\subgraphic.php 行 中的archivo1 7

通知：C:\xampp\htdocs\airpost\home\subgraphic.php行中未定义索引：archivo1 >8
"

如果有人能说出我的代码有什么问题，那就太棒了。提前谢谢。

PS：上传文件在 php.ini 中是开启的

【问题讨论】：

你试过this tutorial吗？我也有兴趣回答你的问题，因为我手头也有类似的困境。

标签： javascript php ajax file upload

【解决方案1】：

从您发布的代码片段中，您的 jQuery 选择器指向 undefined 元素

改变

formData.append("archivo1", $("#formuploadgraphic")[0]);

到

formData.append("archivo1", $("#archivo1").prop('files')[0]);

【讨论】：

我刚刚测试了你的修复并且 id 没有修复，但这就像 99% 的解决方案，问题确实是选择器，所以我尝试了不同的解决方案，直到我添加了 [0] ，因为我一次只发送一个文件，这就像一个魅力。所以该行改为： formData.append("archivo1", $("#formuploadgraphic").files[0]); ，它奏效了。好的，我不知道如何在答案中将其设置为代码，但它确实有效，非常感谢
我的错，我在输入答案时错过了这一点。我现在已经编辑了原始答案。

【解决方案2】：

您是否尝试过更改此行

var formData = new FormData();
formData.append("archivo1", $("#formuploadgraphic")[0]);

到

var formData = new FormData($("#formuploadgraphic")[0]);

并将 enctype="multipart/form-data" 添加到您的表单属性

<form name='formuploadgraphic' enctype="multipart/form-data">

【讨论】：

好的，我实现了这两项更改，但我仍然得到相同的响应，我似乎找不到该代码的问题