FormData() 在 Firefox 和 Internet Explorer 中不工作；只有 Chrome 可以

Question

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

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

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

但内容长度为 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.';
}}

即使我尝试发送空表格，也没有收到错误 "Please select the file to upload"。

Answer 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';}

经验教训：始终明确编码。

FormData() 在 Firefox 和 Internet Explorer 中不工作；只有 Chrome 可以

FormData() not working in Firefox and Internet Explorer; only Chrome is OK

ajax

upload

form-data