表单未提交文件/未定义索引：FileInput - PHP/AJAX/jQuery答案

【问题标题】：Form not submitting file / Undefined index: FileInput - PHP/AJAX/jQuery表单未提交文件/未定义索引：FileInput - PHP/AJAX/jQuery
【发布时间】：2015-09-24 22:44:08
【问题描述】：

我正在尝试使用 jQuery 触发表单提交，然后使用 AJAX 调用将处理文件并返回响应的 PHP 脚本。但是，问题是提交表单时文件没有被上传。

HTML：

<div id="browseButton" class="step1Button" onclick="browseFile()">Browse</div>

<form method="post" id="fileForm" style="display:inline-block;">
    <input id="browseInput" type="file" name="FileInput" style="display: none"/>
    <label for="upload-click-handler"></label>
    <input id="upload-click-handler"  type="text" readonly />

    <input id="submitForm" type="submit" style="display: none"/>

</form>

<div id="previewButton" class="step1Button pull-right" onclick="uploadFile()" style="background-color: #57a957">
    Preview
</div>

jQuery:

function uploadFile() {
    submitForm();

    parseExcel();
}

var submitForm = function() {
    $('#previewButton').click(function(){
        $('#submitForm').click();
    });
};

var parseExcel = function() {

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET",'default/ParseExcel',true);
    xmlhttp.send();


    console.log("made it past excel parse");

};

被调用的 PHP：

public function actionParseExcel() {
    print "made it to parse".PHP_EOL;
    print "File:";

    if($_FILES['FileInput']['tmp_name']) {
        print_r($_FILES['FileInput']['tmp_name']);
    }

    else {
        print "Not found";
    }

    print "Done.";

}

我知道问题在于我的表单没有提交所选文件，因为这通常是引发“未定义索引”错误的原因。但我不明白为什么。

【问题讨论】：

展示浏览文件功能
似乎有点脱节。您仍在使用内联 JavaScript，这会混淆对我而言的流程。其他人可能会看到它。 AJAX 的 dataType 是错误的，您可以在那里放置的内容有严格的限制（xml、json、脚本或 html）。仅使用 AJAX 执行文件上传通常是禁止的，但如果您使用的是 HTML5，则有一些方法可以解决。
@AkhileshSingh - browseFile 函数唯一做的就是调用文件输入标签（我把它隐藏了，因为它很难看）。 @JayBlanchard - 上传没有发生在 AJAX 中，它发生在调用提交输入标签的 submitForm 函数中。但是你能进一步解释为什么内联 javascript 会让人困惑吗？它所做的只是调用 .js 文件中的一个函数
我已经更新了我的 AJAX 函数

标签： javascript php jquery ajax forms

【解决方案1】：

首先，如果您不想刷新页面，最好使用<input type="button"> 或者在函数uploadFile() 的末尾通过<form onSubmit="uploadFile()"> 和return false 调用你的JavaScript。

其次，您需要将enctype="multipart/form-data" 放入您的<form>。

我看到你在使用 JQuery，你也应该用它来发送你的 AJAX 请求：

// This code supports multiple type="file" inputs
// Variable to store your files
var files;

// Add events
$('input[type=file]').on('change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
  files = event.target.files;
}
// Create a formdata object and add the file
var data = new FormData();

// In case you want to upload more than one file
$.each(files, function(key, value)
{
    data.append(key, value);
});

$.ajax({
    url: 'your.php?FileInput',
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, // Prevent the file from beeing converted to string
    contentType: false, // Set the content file to false prevent JQuery from using 'application/x-www-form-urlencoded; charset=UTF-8' as default type
    ...
});

我希望这将引导您找到解决方案...

已编辑：var files 声明 + files 处理

【讨论】：

你在哪里定义files？我在想当我在<form> 中调用uploadFile() 时，我可以将文件作为参数插入......就像这样：<form onSubmit="uploadFile(FILE_IN_FORM)" ..etc>
抱歉，我忘记了我的代码的上面几行（我会编辑它）。您的表单声明应该类似于<form enctype="multipart/form-data" method="post" id="fileForm" >。简单来说，只需将<input type="submit"> 按钮替换为<input type="button">（您无需为onSubmit 操心）

【解决方案2】：

要发送带有文件的表单，您需要使用 enctype="multipart/form-data"。但是，据我所知，您不能使用 ajax 发送文件。

因此，解决方案是使用隐藏的 iFrame：

创建一个隐藏的 iFrame（在您的表单之外）并为其分配一个 ID
创建指向您的 PHP 文件的表单，并使用属性 enctype="multipart/form-data" 和 target="ID_OF_THE_IFRAME"（因此表单在提交时将发送到该 iframe）
当 PHP 完成对文件的处理后，您可以输出一个调用 parent.YOURFUNCTION() 的 javascript，这样您就可以在处理完成后做任何您想做的事情。

祝你好运！

【讨论】：

我会试一试。谢谢你。我假设这种方式可以防止整个窗口刷新？通常当我从一个form标签调用一个php文件时，它会刷新整个页面以显示php文件的返回
就是这个想法...“模拟 ajax”，也就是说，没有页面刷新 ;)
虽然我最终没有采用这个解决方案，但这是一个很好的建议，所以我将其标记为答案