如何使用Ajax发送图像

时间:2017-09-22 08:44:21

标签: javascript jquery ajax

我想知道如何使用javascript ajax函数将图像数据发送到服务器(Django应用程序)。

以下是我的代码。

// Get filename of image
jsondata = JSON.parse(data);
image_file_name = jsondata.fileurl;
// document.getElementById('previewimage').src = image_file;
// I can show the image.

b64_image = btoa(unescape(encodeURIComponent(image_file)));
var credentials = {
    filename: image_file_name,
    image: b64_image,
};

// Send ajax request to the server
$.ajax({
    url: HOST_NAME + "user/api/file_uploader/",
    type: 'GET',
    dataType: 'json',
    data: credentials,
    timeout: 10000,
})
.done(function (data) {

    // Get the result
    jsondata = JSON.parse(data);
    alert("File upload completed...");

})
// If false...
.fail(function (XMLHttpRequest, textStatus, errorThrown) {
    console.log("Upload error");
})

2 个答案:

答案 0 :(得分:2)

您必须使用FromData发布使用ajax的文件。

javascript:void(0)

答案 1 :(得分:1)

您只需在代码中进行一次更改。

// Send ajax request to the server
$.ajax({
     url: HOST_NAME + "user/api/file_uploader/",
     type: 'POST',        // changed from GET to POST  
     dataType: 'json',
     data: credentials,
     timeout: 10000,
  })
 .done(function (data) {
  // Get the result
 })
 .fail(function (XMLHttpRequest, textStatus, errorThrown) {
   console.log("Upload error"); 
 })

因为GET用于读取和发布用于创建。 您可以阅读有关request methods的更多信息。