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

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

编辑：请注意，用户未通过表单上传图片。这是一个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并将enctype的{{1}}更改为form，然后使用"multipart/form-data"发送数据AJAX调用中的JavaScript，无需提交表单。

Answer 2

你的身材显然是错的。事实上，图像元素只不过是一个DOM节点，包含图像的URL，图像本身由浏览器下载，所以在客户端机器上它只能在浏览器内存中使用。甚至以某种方式你获得对浏览器内存（缓存）的访问，考虑到基于客户端连接，很有可能从那里上传它比从原始源下载服务器端慢。另一个解决方案是您通过ajax下载基于URL（img.src）的图像，只需在第一个回调中使用其他ajax绕行它，但它当然意味着图像平均传播的次数是两倍。

从DOM获取图像并通过ajax上传

2 个答案: