通过 Ajax FormData() 发送文件和字符串

Question

我正在尝试使用 Ajax 中的 FormData() 函数将文件和字符串上传到 MongoDB。我知道 Ajax 倾向于对所有传递的数据进行字符串化，除非我们设置 processData: false，因此我必须对文件和字符串都使用 FormData。

HTML 片段

<h5 class="modal-title h5Modal" id="htmlIP"></h5>
<div class="form-group">
<label for="fileUpload">Choose a File To Upload:</label>
<input type="file" id="fileUpload" accept="image/*,.pdf,.pptx" class="file-path">
</div>
<div class="modal-footer">
<button class="btn btn-primary submitFile" data dismiss="modal" > Submit </button>
</div>

Python

def FileSubmit(request):
    if request.method == "GET":
       ip = request.GET['IP']
       file = request.GET['fileUpload']

    else:
       ip = ''

    res = Pc.uploadToDB(ip, file)


    data = {
         'version' : res,
    }

    return JsonResponse(data)        

uploadToDB 函数在 MongoDB 中查找具有提供的 ip 的文档并更新文件字段。

这是我的 Ajax 函数：

$(document).ready(function() {
    $('.submitFile').on('click,function(){
        var rowID = $('#htmlIP').text();

        formdata = new FormData();
        var file = document.getElementById('fileUpload').files[0];
        formdata.append('file', file);


        $.ajax({
            type: "GET",
            url: 'FileSubmit/' + rowID,
            //data: {
            //    'IP': rowID,
            //    'fileUpload': file,
            //},
            data: formdata,
            processData: false,
            contentType: false,
            success: function(data){
                alert(data.version);
                window.location.reload();
            },
            error: function(err){
                alert(err);
             }
         });

    });
});

如您所见，我已经注释掉了我使用数据的第一种方法。

当我尝试使用这些函数上传文件时，我收到以下错误：

Not Found: Path/to/FileSubmit/XXX.XXX.XXX.XXX

这是可以理解的，因为我不应该提供 rowID 作为 url。但这是我能够正确获取文件和 ip 的最接近的方法。

每当我删除 url 中的 rowID 并尝试不同的解决方案时，我都会收到相同的以下错误，该错误指向用 Python 编写的 request.GET 行：

MultiValueDictKeyError: "u'IP'"

这意味着它无法正确读取 IP。

我查看了Send FormData and String Data Together Through JQuery AJAX? 中提供的大部分答案 然而，不幸的是，它们中的大多数并没有帮助我，因为它们专注于上传一组字符串而不是一个实例。

有没有办法将字符串附加到 formdata 或我不知道的其他方法？非常感谢任何帮助或建议。

Answer 1

我认为问题在于您的 AJAX 请求类型。您应该发送POST 发送文件的请求。

$.ajax({
    type: "POST",
    ...
});