通过 ajax POST 上传图片而不使用 HTML 表单

Posted 2023-03-10

【中文标题】通过 ajax POST 上传图片而不使用 HTML 表单

【英文标题】：Image upload via ajax POST without using HTML form

【发布时间】：2016-07-19 10:42:53

【问题描述】：

我正在尝试通过 POST 方法将一些数据发送到 php 文件，而不使用 html 中的表单。这是我的代码。为什么它什么都不做？

<input type="file" name="fileToUpload" id="fileToUpload">
<input type="hidden" value="<?php echo $row['Gallery_Id']; ?>" name="gid" id="gid">
<input type="hidden" value="User" name="user" id="user">
<button onclick="myFormData()">Upload Image</button>
<script>
            $('#fileToUpload').on('change', function() 
            var myFormData = new FormData();
            var file = document.getElementById('fileToUpload').value;
            var gid = document.getElementById('gid').value;
            var user = document.getElementById('user').value;
            myFormData.append('file', file);
            myFormData.append('gid', gid);
            myFormData.append('user', user);
            );

            $.ajax(
                url: 'imgupload.php',
                type: 'POST',
                processData: false, // important
                contentType: false, // important
                dataType : 'json',
                data: myFormData
            );

            </script>

在imgupload.php 我得到这样的 POST 数据

$gid = $_POST['gid'];
$user = $_POST['user'];

当我使用 HTML 表单方法时它起作用了。这里有什么问题？

【问题讨论】：

您在控制台中看到了什么？任何错误。访问网络选项卡

myFormData()在哪里？

你需要 enctype="multipart/form-data" 这个表单来上传文件

@SantoshRamKunjir，为此我必须使用

您实际上并没有从输入元素中提取值，您只是获取 html 元素本身。

【参考方案1】：

FormData.append() 采用键值对，所以这是错误的：

myFormData.append(file,gid,user);

你需要这样的东西：

myFormData.append('file', file);
myFormData.append('gid', gid);
myFormData.append('user', user);

除此之外，您需要将此代码放入事件处理程序中，以便在您需要时触发它。

例如：

$('#fileToUpload').on('change', function() 
  // your javascript code
);

您可能还应该将它放在 document.ready 块中。

【讨论】：

我做了你所说的改变，但仍然没有。我更新了问题的代码

@YohanBlake 如果您错过了，请在您的问题下方查看我的评论。

@HeadCode 这里肯定有很多错误:-)