使用 AJAX POST POST 数据 [英] POST data using AJAX POST

问题描述

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

Is it possible to post image file using the jQuery's ajax post method. Would it work if I just put the file data in the POST request's 'data' parameter?

我正在使用 Django 框架.这是我的第一次尝试:

I am using django framework. This is my first attempt:

$('#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"对象.

The problem with this is that I don't get the'request.FILES' object on the serer side in my 'views.py'.

我也试过用 ajax post 来做，但它也不起作用.

I also tried doing it with ajax post but it doesn't work either.

$('#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);
      }
    });  
  });

推荐答案

这是我最终的工作解决方案:

This is my final working solution:

$('#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, 

    });  
  });

这篇关于使用 AJAX POST POST 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！