javascript - 从DOM获取img并通过ajax上传

Question

如何从 DOM 获取图像，然后通过 ajax 上传？

my_img_ele = document.getElementById("my_img");

这是ajax调用

    var xmlHttp=new XMLHttpRequest();
    xmlHttp.open("POST", "site", true);
    var formData = new FormData();  
    formData.append(IMG_HERE); 
    xmlHttp.send(formData);

我一直在做的只是发送 url，然后查找图像服务器端。但我认为这会更快。

编辑:请注意，用户没有通过表单上传图像。它是一个 img 元素。

Answer 1

如果您询问“通过 AJAX 上传图像”，使用 FormData 答案会更简单，并且可以在互联网上轻松搜索到。

请查看 this link解决你的问题。

要从 DOM 获取图像，您可以使用上面相同的方法。但您不是提交表单，而是将 DOM img 元素作为 dataURI 读取。

检查FIDDLE对于以下代码的 HTML:

var originalImage = document.getElementById("image"),
    canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    formdata = false,
    dummy = document.getElementById('dummy'),
    newImage = new Image();

if (window.FormData) {  
    formdata = new FormData();  
}  

newImage.onload = function(){
    // width and height here should be the same as original image
    // detect before-hand, using jQuery(el).width() /.height() on the DOM element
    context.drawImage(newImage, 0, 0, 400, 300);
}

newImage.src = originalImage.src;

  // traditional ajax and jQuery, no HTML5
if (formdata) {
    var canvasToDURI = canvas.toDataURL();
    formdata.append("image-data", canvasToDURI);

    // yay!, jQuery
    $.ajax({  
      url: "upload.php",  
      type: "POST",
      data: formdata,
      processData: false,  
      contentType: false,  
      success: function (res) {  
        // do some thing !
        dummy.innerText = 'Image data sent !';
      },
      error: function(a, b, c) {
        dummy.innerText = 'The following data was not sent due to : ' + b + ' -- '+ c + ' \n\n' + canvasToDURI;
      } 
    });  
}

如果也不支持FormData，您可以创建一个表单element并更改form的enctype > 到 "multipart/form-data" 并在 AJAX 调用中使用 JavaScript 发送数据，而无需提交表单。