使用 AJAX POST POST 数据

Posted 2023-02-24

【中文标题】使用 AJAX POST POST 数据

【英文标题】：POST data using AJAX POST

【发布时间】：2014-01-10 00:33:18

【问题描述】：

是否可以使用 jQuery 的 ajax 发布方法发布图像文件。如果我只是将文件数据放在 POST 请求的 'data' 参数中，它会起作用吗？

我正在使用 django 框架。这是我的第一次尝试：

$('#edit_user_image').change(function()
    var client = new XMLHttpRequest();
    var file = document.getElementById("edit_user_image");
    var csrftoken = document.getElementsByName('csrfmiddlewaretoken')[0].value
    /* Create a FormData instance */

    var formData = new FormData();
    formData.append("upload", file.files[0]);


    client.open("post", "/upload-image/", true);
    client.setRequestHeader("X-CSRFToken", csrftoken);
    client.setRequestHeader("Content-Type", "multipart/form-data; charset=UTF-8; boundary=frontier");
    client.send(formData);  /* Send to server */ 
  );

问题在于我在“views.py”的服务器端没有得到“request.FILES”对象。

我也尝试过使用 ajax 发布，但它也不起作用。

$('#edit_user_image').change(function()
    var data = csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
                content:document.getElementById("edit_user_image").files[0],
    $.post("/upload-image/", data, function()
    );
  );

从答案之一编辑：

$('#edit_user_image').change(function()
    var formData = new FormData($("#edit_user_image")[0]);

    $.ajax(  
      type: "POST", 
      url: "/upload-image/",  
      xhr: function()   // custom xhr
        // If you want to handling upload progress, modify below codes.
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload) // check if upload property exists
          myXhr.upload.addEventListener('progress', yourProgressHandlingFunction, false); // for handling the progress of the upload
        
        return myXhr;
      ,
      data: formData,  
      // Options to tell JQuery not to process data or worry about content-type
      cache: false,
      contentType: false,
      processData: false,
      beforeSend: function(xhr) 
        // If you want to make it possible cancel upload, register cancel button handler.
        $("#yourCancelButton").click(xhr.abort);
      ,
      success: function( data )   
        // Something to do after upload success.
        alert('File has been successfully uploaded.'); 
        location.reload();
      ,
      error : function(xhr, textStatus) 
        // Something to do after upload failed.
        alert('Failed to upload files. Please contact your system administrator. - ' + xhr.responseText);
      
    );  
  );

【问题讨论】：

你试过了吗？发生了什么？

“发布”请求永远不会发生。

您确实需要提供更多信息。你想达到什么目的？如果您对图像文件进行了 base64 编码，则可以发布图像文件，但您需要服务器才能期待 base64。只需填写一些空白，我们会为您提供帮助。

【参考方案1】：

这是我的最终解决方案：

$('#edit_user_image').change(function()
    var csrftoken = document.getElementsByName('csrfmiddlewaretoken')[0].value
    var formData = new FormData($("#edit_user_image")[0]);
    var formData = new FormData(); 
    formData.append("file", $('#edit_user_image')[0].files[0]);
    formData.append("csrfmiddlewaretoken", csrftoken);

    $.ajax(  
      type: "POST", 
      url: "/upload-image/",  
      data: formData, 
      contentType: false, 
      processData: false, 

    );  
  );

【讨论】：

有效！我花了将近 2 天的时间进行谷歌搜索和实验！谢谢。

【参考方案2】：

如果您使用FormData，则可以，否则您必须使用 Flash 或 iframe 或插件（这些使用 Flash 或 iframe），FormData 带有 html5，因此它无法在 IE replica 的 FormData，要使用它，您只需将 formdata.js 放在 head 标记中。所以在我看来你必须使用 FormData。

我们说你有这样的表格：

<form method="POST" name="form" id="form" enctype="multipart/form-data">
    <input type="file" id="img"/>
    <input type="submit"/>
</form>

您必须获得用户选择的 img，因此您的 javascript 必须如下所示：

$(document).ready(function()
    $('form').on('submit', function(e)
        e.preventDefault();
        var data = new FormData($('form').get(0));
        $.ajax(
            url: :"/URL",
            method: "POST",
            data: data,
            success: function(data),
            error: function(data),
            processData: false,
            contentType: false,
        );
    );
);

现在您将能够检索用户在 django 中选择的 img：

request.FILES

【讨论】：

这似乎与其他答案相似。我已经尝试过它的代码，但我得到'无法上传文件。请联系您的系统管理员

这是唯一的方法，你从哪里得到这个错误？在 Django 中？

不，您是否从其他答案中阅读了 sn-p。如果 ajax 失败会导致此错误。

是的，但那是因为在 django 等中出现了问题，您可以使用 google chrome 的开发工具或 Firefox 中的 firebug 检查响应。

如果是这样，我想知道这个简单的“视图”可能有什么问题： def upload_image(request): if request.method=="POST": if request.FILES: return HttpResponse ( "AJAX" ) 其他：返回 HttpResponse("bad")

【参考方案3】：

是的。您可以使用 jQuery 的 ajax 发布您的图像文件。

试试下面的代码 sn-p。

// Your image file input should be in "yourFormID" form.
var formData = new FormData($("#yourFormID")[0]);

$.ajax(  
    type: "POST", 
    url: "your_form_request_url",  
    xhr: function()   // custom xhr
        // If you want to handling upload progress, modify below codes.
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload) // check if upload property exists
            myXhr.upload.addEventListener('progress', yourProgressHandlingFunction, false); // for handling the progress of the upload
        
        return myXhr;
    ,
    data: formData,  
    // Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false,
    beforeSend: function(xhr) 
        // If you want to make it possible cancel upload, register cancel button handler.
        $("#yourCancelButton").click(xhr.abort);
    ,
    success: function( data )   
        // Something to do after upload success.
        alert('File has been successfully uploaded.'); 
        location.reload();
    ,
    error : function(xhr, textStatus) 
        // Something to do after upload failed.
        alert('Failed to upload files. Please contact your system administrator. - ' + xhr.responseText);
    
);  

【讨论】：

我使用上面的代码得到了这个：'上传文件失败。请联系您的系统管理员'

什么是 xhr.responseText？

【参考方案4】：

我的建议是在 ajax 块之后添加“return false”。