FormData() 在 Firefox 和 Internet Explorer 中不起作用；只有 Chrome 没问题答案

【问题标题】：FormData() not working in Firefox and Internet Explorer; only Chrome is OKFormData() 在 Firefox 和 Internet Explorer 中不起作用；只有 Chrome 没问题
【发布时间】：2015-02-16 02:54:09
【问题描述】：

我正在尝试使用 FormData() 构建 AJAX 图像上传，但它不适用于 Firefox 和 IE。在 Chrome 中，一切都运行良好； php 脚本接收表单数据对象并按预期返回响应。

但是，在 Firefox 和 Internet Explorer 中，总是会返回一个空字符串作为响应（成功发送 AJAX 调用）。当我在普通的网络选项卡中检查时，内容的大小为 0。当我在 Firebug 的网络选项卡中检查时，POST 选项卡实际上表明我的 FormData() 包含该文件：

内容配置：表单数据；名称="文件上传"; filename="9VMyIQM4Vg8.jpg" 内容类型：image/jpeg

但是 content-length 为 0 并且 php 脚本无法检索文件。即使我尝试使用 append 手动创建 FormData()，也无济于事。

Firefox 版本 35.0.1（文档说 FormData() 应该可以正常工作）和 IE 版本 11（因此它也应该处理 FormData()）。任何帮助将不胜感激！

这是我的代码（我缩短了用于测试的 php 脚本）。

HTML：

<form method="post" action='upload.php' name='imageUploadForm' id="imageUploadForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for='fileToUpload'>Select image to upload:</label>
                <input type="file" name="fileToUpload" id="fileToUpload" />
                <button type="submit" name="uploadBtn" id="uploadBtn">Preview image</button>
                <p id='uploadResult'></p>
            </div>
        </form>

JQuery:

$('#imageUploadForm').on('submit', function (event) {
var form = $(this);
event.preventDefault();
var formData = false;
if (window.FormData) {
    formData = new FormData(form[0]);
}

$.ajax({
    type: 'POST',
    url: 'upload.php',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
        console.log("success");
        console.log(data);
        $('#uploadResult').text(data);
    },
    error: function (data) {
        console.log("error");
        console.log(data);
        $('#uploadResult').text(data);
    }
});

});

PHP：

if ($_POST) {
if (!empty($_FILES['fileToUpload']['name'])) {
    $image = basename($_FILES['fileToUpload']['name']);
    $target_file = $target_dir . $userID . "_" . basename($_FILES["fileToUpload"]["name"]);

    echo $target_file;

} else {
    print 'Please select a file to upload.';
}}

即使我尝试发送空表单，我也不会收到错误“请选择要上传的文件”。

【问题讨论】：

标签： ajax upload form-data

【解决方案1】：

好的，所以我终于让 Firefox 和 Internet Explorer 通过 POST 将 formData() 对象发送到 PHP 脚本。

HTML 和 jQuery 部分没问题。问题出在 php 脚本上 - 它缺少检查 isset($_POST)。添加此检查后，一切都开始工作了：

更新的 PHP：

if (isset($_POST)) // isset() check fixed the issue {
if (!empty($_FILES['fileToUpload']['name'])) {
    $image = basename($_FILES['fileToUpload']['name']);
    $target_file = $target_dir . $userID . "_" . basename($_FILES["fileToUpload"]["name"]);

    echo $target_file;
    die();

   } else {
    print 'Please select a file to upload.';
}} else {
echo 'Nothing was sent';}

课程：始终明确编码。

【讨论】：