使用jquery AJAX和FormData进行文件上传

时间:2015-02-04 19:40:03

标签: jquery ajax post file-upload knockout.js

我正在尝试通过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

没有文件转移到服务器。 content-type设置为application / x-www-form-urlencoded,但它应该是multipart / form-data。我做错了什么?

1 个答案:

答案 0 :(得分:1)

FormData构造函数使用HTMLFormElement(即表单而非文件)来添加必须使用append方法的单个文件

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

你拼错了contenType错误它应该是contentType,一起注意2 Ts