通过 AJAX 上传文件 [关闭]答案

【问题标题】：Uploading files through AJAX [closed]通过 AJAX 上传文件 [关闭]
【发布时间】：2013-04-17 01:00:17
【问题描述】：

我希望能够使用 AJAX 上传文件。

我尝试过使用（JavaScript）：

   $("input[type='file']").change(function(){
        var file = document.getElementById("uploadelement").files[0];
        $.ajax({
            url: "upload.php",
            type: "POST",
            beforeSend: function(xhr){
                xhr.setRequestHeader("X_FILENAME", file.name); 
            },
            success: function(data){
                console.log(data);
            }
        });
    });

使用 (PHP)：

<?php

    $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
    if ($fn) {
        // AJAX call
        file_put_contents(
            'uploads/' . $fn,
            file_get_contents('php://input')
        );
        echo "$fn uploaded";
        exit();
    }

?>

但是，我遇到了问题，即文件内容未显示。我不确定出了什么问题。我在tutorial 上找到了这段代码，所以我认为它应该可以工作。

文件已上传到文件夹，但没有内容。

【问题讨论】：

您没有发送文件，这在查看您的客户端代码后非常清楚。
你试过document.getElementById("uploadelement").files;而不是document.getElementById("uploadelement").files[0];吗？ [] 括号通常用于多次上传。可能是问题所在，但我不能 100% 确定。
@Fred document.getElementById("uploadelement").files 只返回一个数组。
@RayNicholus file_get_contents('php://input') 应该得到内容。
从哪里获取？我再说一遍，你没有发送文件。

标签： php javascript jquery ajax file-upload

【解决方案1】：

我不知道使用 jQuery $.ajax() 调用，但这可以通过使用 XMLHttpRequest 来实现，如下所示：

var file = document.getElementById("uploadelement").files[0];
var form_data = new FormData();
form_data.append("userfile", file);

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "upload.php");
xmlhttp.send(form_data);

然后在你的 PHP 上传处理程序中（upload.php 在这里）：

move_uploaded_file($_FILES["userfile"]["tmp_name"], "path/to/uploads/" . $_FILES["userfile"]["name"]);

然后文件应该已经保存到所需的目录。

【讨论】：