0

如何从 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元素。

4

2 回答 2

4

如果您问的是“通过 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为form并"multipart/form-data"在 AJAX 调用中使用 JavaScript 发送数据，而无需提交表单。

于 2013-06-21T18:40:52.193 回答
1

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

于 2013-06-21T17:44:32.397 回答