Question

是否可以使用jQuery的ajax post方法发布图像文件。如果我只是将文件数据放在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'中的serer端获得thequest.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);
      }
    });  
  });

Answer 1

您可以使用FormData，否则必须使用Flash或iframe或插件（这些使用flash或iframe），FormData附带HTML5，因此无法在IE＆lt; = 9中使用一个好人为旧浏览器创建了一个replica FormData，要使用它，你只需要在head标签中放置 formdata.js 。所以在我看来你必须使用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

Answer 2

这是我最终的解决方案：

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

    });  
  });

Answer 3

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

尝试以下代码段。

// 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);
    }
});

Answer 4

我的建议是添加“在ajax阻止后返回false。

使用AJAX POST POST数据

4 个答案: