使用 jquery AJAX 和 FormData 上传文件

Posted 2023-03-27

【中文标题】使用 jquery AJAX 和 FormData 上传文件

【英文标题】：File Upload with jquery AJAX and FormData

【发布时间】：2015-04-04 11:34:10

【问题描述】：

我正在尝试通过 JQuerys AJAX 方法和 FormData 方法将文件从表单上传到 php 服务器。

我使用knockoutJS在按下上传按钮后触发提交动作。

html 表单：

<form class="form-horizontal" method="post" enctype="multipart/form-data" data-bind="submit: addNewFile">
                        <fieldset>
                            <legend>Add File</legend>

                            <div class="form-group">
                                <label for="inputFile" class="col-lg-2 control-label">File</label>
                                    <input type="file" id="inputFile" name="inputFile">
                            </div>       
                            <div class="form-group">
                                    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Save</button>
                            </div>

                        </fieldset>
                        </form>          

触发的javascript代码：

self.addNewFile = function (content)
    var formData = new FormData(content[1].files[0]);

    $.ajax(
        url: '../api/addFile',
        type: 'POST',
        data: formData,
        contenType: false,
        processData: false)

formData 变量如下所示： http://i.stack.imgur.com/jZ06z.png

http 请求如下所示： http://i.stack.imgur.com/0Whfe.png

没有文件传输到服务器。内容类型设置为 application/x-www-form-urlencoded 但它应该是 multipart/form-data。我做错了什么？

【参考方案1】：

FormData 构造函数采用 HTMLFormElement，即表单而不是文件，以添加您必须使用 append 方法的单个文件

var formData = new FormData();
formData.append('file',content[1].files[0]);

你也拼错了contenType应该是contentType，注意2个Ts在一起

【讨论】：

谢谢，现在似乎正在尝试上传文件，因为请求的大小增加了。内容类型仍然是 application/x-www-form-urlencoded。 i.imgur.com/PqHSGqh.png 但我仍然无法使用 $file = $this->params()->fromFiles(); 在我的 Zend Framework 2 服务器上检索文件。