如何通过 AJAX 和 PHP 以表单形式上传文件？答案

【问题标题】：How to upload files in a form via AJAX and PHP?如何通过 AJAX 和 PHP 以表单形式上传文件？
【发布时间】：2016-02-08 20:00:11
【问题描述】：

这是我迄今为止尝试过的，但它不起作用。 HTML 文件包含：-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Form Generator | Upload Driver Specification Sheet</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type='text/javascript'>
            function submit_form() {

                var formData = new FormData($(this)[0]);

                $.ajax({
                    url: 'last_file_action.php',
                    type: 'POST',
                    data: formData,
                    async: false,
                    success: function (data) {
                        $('#results').html(data);
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });

                return false;
            }
        </script>
    </head>
    <body class="gray-bg3_full">
        <form class="m-t" role="form" id='data'  method="post" enctype="multipart/form-data">
            <input type="hidden" name="MAX_FILE_SIZE" value="2000000">

            <div class="form-group">
                <p id='new_project_text'>Please include your Product spec sheet: </p>
                <input class="btn btn-primary-save btn-block" type="file" name="userfile" /> <i class="fa fa-upload"></i> &nbsp;  <br/>
            </div>
            <button type= 'button' id="submit_driver" class="btn btn-warning block full-width m-b m-t" onclick='submit_form()'>Submit</button>
        </form>
        <div id='results'></div>
    </body>
</html>

PHP 文件，即“last_file_action.php”包含以下内容：-

<?php

if ($_FILES['userfile']['error'] > 0)
{
    switch ($_FILES['userfile']['error'])
    {
        case 1:
            echo "File exceeded upload_max_filesize";
            break;
        case 2:
            echo "File exceeded max_file_size";
            break;
        case 3:
            echo "File only partially uploaded";
            break;
        case 4:
            echo "Please choose a file to upload";
            break;
        case 6:
            echo "Cannot upload file: No temp directory specified";
            break;
        case 7:
            echo "Upload failed: Cannot write to disk";
            break;
    }
    exit;
}
$upfile = 'productinformation/';

if (is_uploaded_file($_FILES['userfile']['tmp_name']))
{
    if (!move_uploaded_file($_FILES['userfile']['tmp_name'], $upfile))
    {
        echo "Problem: Could not move file to destination directory";
        exit;
    }
}
else
{
    echo "Problem: Possible file upload attack. Filename: ";
    echo $_FILES['userfile']['name'];
    exit;
}



// remove possible HTML and PHP tags from the file's contents
$contents = file_get_contents($upfile);
$contents = strip_tags($contents);
file_put_contents($_FILES['userfile']['name'], $contents);
// show what was uploaded

当我单击提交按钮时，我收到此错误“问题：可能的文件上传攻击。文件名：”。这是我自己在 PHP 文件中设置的错误。即使我没有选择要上传的文件，它也会显示此错误。如果我不选择要上传的文件，我希望它显示错误“请选择要上传的文件”。

【问题讨论】：

没有一致的缩进，很难遵循该代码。
related.
我已经编辑了这个问题。我希望现在对你来说更容易@David
@WaseemAbbas：既然你当时没有修复缩进，不，不是。将您的代码格式化为更具可读性可能还会让 you 更轻松地调试您的代码并查看发生了什么。基本上，由于它显示的是您编写的消息，因此在您的条件结构中的某处似乎存在导致显示该消息的条件。那是什么条件？为什么您认为这种情况会有所不同？

标签： php jquery ajax forms http-post

【解决方案1】：

var formData = new FormData();
formData.append("userfile", $(":file")[0].files[0]);

【讨论】：

您应该解释这将如何帮助 OP，以及为什么 OP 的代码会出现问题。
好的。伟大的。这可行，但如果我有两个文件上传而不是一个怎么办。在这种形式中只有一个文件，如果我也有一些输入字段怎么办。

【解决方案2】：

这是我的做法。

var formData = new FormData();

formData.append("userfile", $(":file")[0].files[0]);

只要您有一个文件并且没有其他输入字段，上述代码是正确的。如果您在一个表单中有更多输入字段和多个文件上传。应该通过 ID 而非类型 $(":file") 来考虑目标元素。以下是我们如何获取其他文件：-

 var formData = new FormData();
formData.append("first_file", $("#1st_file_id")[0].files[0]);
formData.append("2nd_file", $("#2nd_file_id")[0].files[0]);
formData.append("3rd_file", $("#3rd_file_id")[0].files[0]);

以下是我们如何通过定位其 ID 从表单的输入字段中获取数据。

  formData.append("input_field", $("#input_field_id").val());

在 PHP 中无需更改任何内容。如果我们想获取输入字段的值，我们可以这样做：-

$var = $_POST['input_field'];

如果它是一个文件，我们可以通过它捕获它并按照问题中的方式完成其余的工作。

$_FILES['userfile'] or $_FILE['2nd_file']

【讨论】：